Animate an element that had display: none? - css

Question

How can I make a hidden element unhidden and transition?
Example:
I want to animate a <div> that has display: none; height: 0px; transition: height 600ms;.
So on click I add a class with display: block; height: 100px;.
The height does not animate.
CodePen
I would prefer a solution that uses transition, but if none is available I can use animation. I am not looking for any answers that use javascript.

Answer 1

You're not going to be able to animate it with display. If you give your .submenu class an overflow: hidden; and remove the display: none;, it will animate as desired since you're already animating the height from 0.
CSS
.submenu {
height: 0;
overflow: hidden; /* <-- Add This */
background: blue;
transition: height 600ms ease 0ms;
}
CodePen
$('.menu').click(function(){
$('.submenu').toggleClass('open');
});
.menu {
background: red;
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all .2s ease-in-out;
}
.submenu {
height: 0;
overflow: hidden;
background: blue;
transition: height 600ms ease 0ms;
}
.submenu.open {
display: block;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<h1>Click me to expand a submenu</h1>
<div class="submenu">
<p>test 1</p>
<p>test 2</p>
</div>
</div>