+ 1
Why isnt my transition showing?
I have a code as follows: body article:first-of-type { position:relative; border:dashed blue thick; /*display:none;*/ transition:all 1000ms ease-in-out; height:0; } body article:first-of-type.open { /*display:block;*/ height:auto; } I want it to transition the height as it expands, but the transition isn't showing! In the JS, I have it so that when you click on a button, it expands the first article. Which works, but I want it to show a transition. How do I do this? https://
5 Answers
+ 1
Hi Jeremy
Ah yes just spotted the commented out section, so it got me to look at it a bit more. It looks like you cant transition from a height value to auto. The W3C Specs have not implemented auto for Transitions.
Solution is still to use animations.
Here is good article on the matter
https://css-tricks.com/using-css-transitions-auto-dimensions/
+ 1
Hi Jeremy
Unfortunately, if you attempt to change display and transform at the same time, display âwinsâ: the element appears, but nothing gets transitioned. This is to do with the Browser's event loop. If you send it a load is CSS changes at once, it ends up just doing the last one which is display in this case.
Use an Animation keyframe instead with a transform.
Let me know if you an example.
+ 1
Mike Choy thanks for your answer. but as a side note, my example has display commented out
+ 1
I learnt something too!
0
Mike Choy thank you for your concern