Why isnt my transition showing?

Question

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

Answer 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/

Answer 2

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.

Answer 3

Mike Choy thanks for your answer. but as a side note, my example has display commented out

Answer 4

I learnt something too!

Answer 5

Mike Choy thank you for your concern