Dojo : animateProperty for “display”

问题:

I'm trying to animate changes of the CSS "display" property with Dojo and dojo/_base/fx.

Here's my code :

function invert_display(id) {
    var element = dom.byId(id),
        currDisplay = style.get(element, 'display'),
        nextDisplay = currDisplay === 'block' ? 'none' : 'block';
    baseFx.animateProperty({
        node: id,
        properties: {
            display: 'none',
            backgroundColor: '#f00'
        }
    }).play();
}

Everything seems to work fine, modules are imported properly (AMD style), variable values are valid and the div background-color turns red but the div doesn't fade out ("display" property set to "none").

Thanks you in advance !

回答1:

The display style cannot really be animated, as it doesn't have any intermediate values between none and the visible states (block, inline etc).

To make it fade in/out, you need to animate the opacity style (Dojo's base fx actually already has functions for this). Since you also want to animate the colour, you can for example you can change your function into something like:

function invert_display(id) {
    var element = dom.byId(id),
        opacity = style.get(element, 'opacity');

    baseFx.animateProperty({
        node: id,
        properties: {
            opacity: opacity<1 ? 1 : 0,
            backgroundColor: opacity<1 ? '#00f' : '#f00'
        }
    }).play();
}

Now, setting the opacity to 0 doesn't remove the element, it just makes it transparent. If you want to elegantly remove it as well, you could perhaps add height: opacity<1 ? 42 : 0 to the animation as well, making it "minimize" while fading. Alternatively, you can use the onEnd and onBegin functions to set the display style when the animation is finished/beginning (this doesn't always look very elegant though).

Example here: http://jsbin.com/aqigoj/1/edit