Css transition not working on parent when showing child content

Question

<div id='element-with-transition'>
    <div class='child'>
       <div style='display:none'>Something here...</div>
       <div style='display:none'>Something here...</div>
       <div style='display:none'>Something here...</div>
    </div>
</div>

<style>
#element-with-transition{
        -webkit-transition: height 3s;
        transition: height 3s;   
}
</style>

When I change display:none to display:block the content is shown but the transition is not fired. I already tried changing the transition from height to all, but nothing changes. Am I doing it correctly?

How is this a duplicate? The question related asks about transitions of an element from display:none to display:block, this asks about the parent element's transition. — user541905, Apr 02 '15 at 13:00

score 1 · Answer 1 · answered Jun 04 '14 at 07:39

1

You can not change display:none; to display:block; with transition. If you want to animate height then your have to use height:0; overfloaw:hidden; for initial state then set height:100px; (or any desired value) for final state.

answered Jun 04 '14 at 07:39

demonofthemist

4,081
4
26
45

So, transition will ony work if I set a different fixed height to the element? – Ricardo Neves Jun 04 '14 at 07:53
Yes It should work. Don't change disply.. keep it block always & try changing height. – demonofthemist Jun 04 '14 at 08:07

Css transition not working on parent when showing child content

1 Answers1