CSS transition on display property doesn't work

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!

See: http://stackoverflow.com/questions/3331353/transitions-on-the-display-property — Guffa, Jul 26 '15 at 11:52

score 3 · Accepted Answer · answered Jul 26 '15 at 11:50

3

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

answered Jul 26 '15 at 11:50

amenthes

3,117
1
32
38

CSS transition on display property doesn't work

1 Answers1