+ 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://

18th Apr 2018, 4:57 PM
fallOut015
fallOut015 - avatar
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/
19th Apr 2018, 9:47 AM
Mike Choy
Mike Choy - avatar
+ 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.
18th Apr 2018, 8:10 PM
Mike Choy
Mike Choy - avatar
+ 1
Mike Choy thanks for your answer. but as a side note, my example has display commented out
18th Apr 2018, 8:15 PM
fallOut015
fallOut015 - avatar
+ 1
I learnt something too!
19th Apr 2018, 2:04 PM
Mike Choy
Mike Choy - avatar
0
Mike Choy thank you for your concern
19th Apr 2018, 1:36 PM
fallOut015
fallOut015 - avatar