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), curr

Solution 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