显示属性上的CSS过渡不起作用

Question

I've set up a function:

function removeDiv(el){
    var elem = document.getElementById(el);
    elem.style.transition = "display 2.5s linear 0s";
    elem.style.display = "none";    
}

and created a div which has the function called onclick. However when I click on the div it disappears immediately without transitioning. Are display transitions not supported - can it be either one state like 'block' or another? Thanks for looking!

Answer 1

display is not a property that can be animated. Try opacity instead.

For future reference, here is the official specification of all properties that can be animated: http://www.w3.org/TR/css3-transitions/#animatable-css