Menu
I've started using transitions to "modernise" the feel of a site. So far, :hover transitions are working great. Now I'm wondering if it's possible to trigger a transition based on other things, such as when a class changes.
Here's the relevant CSS:
#myelem { opacity: 0; display: none; transition: opacity 0.4s ease-in, display 0.4s step-end; -ms-transition: opacity 0.4s ease-in, display 0.4s step-end; -moz-transition: opacity 0.4s ease-in, display 0.4s step-end; -webkit-transition: opacity 0.4s ease-in, display 0.4s step-end; } #myelem.show { display: block; opacity: 1; transition: opacity 0.4s ease-out, display 0.4s step-start; -ms-transition: opacity 0.4s ease-out, display 0.4s step-start; -moz-transition: opacity 0.4s ease-out, display 0.4s step-start; -webkit-transition: opacity 0.4s ease-out, display 0.4s step-start; } The JavaScript to trigger the change is:
document.getElementById('myelem').className = "show"; But the transition doesn't seem to be happening - it's just jumping from one state to the other.
What am I doing wrong?
727
If you even toggle the display property from none to block , your transition on other elements will not occur. To work around this, always allow the element to be display: block , but hide the element by adjusting any of these means: Set the height to 0 . Set the opacity to 0 .
One of the properties that cannot be animated is the display property.
Visibility is an animatable property according to the spec, but transitions on visibility do not work gradually, as one might expect. Instead transitions on visibility delay hiding an element. On the other hand making an element visible works immediately.
Triggering transitions You can trigger CSS transitions directly with pseudo classes like :hover (activates when the mouse goes over an element), :focus (activates when a user tabs onto an element, or when a user clicks into an input element), or :active (activates when user clicks on the element).
It does work when you remove the display properties.
#myelem { opacity: 0; transition: opacity 0.4s ease-in; -ms-transition: opacity 0.4s ease-in; -moz-transition: opacity 0.4s ease-in; -webkit-transition: opacity 0.4s ease-in; } #myelem.show { opacity: 1; transition: opacity 0.4s ease-out; -ms-transition: opacity 0.4s ease-out; -moz-transition: opacity 0.4s ease-out; -webkit-transition: opacity 0.4s ease-out; } JSFiddle.
The reason for this is that only CSS properties with numbers can be transitioned. What do you think the "50% state" should be between "display: none;" and "display: block;"? Since that can't be calculated, you can't animate the display property.
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
