使一个具有display: none的元素动画化

Question

如何使隐藏元素解除隐藏并进行过渡?

例子:

我想动画一个有display: none; height: 0px; transition: height 600ms;的<div>。

点击添加display: block; height: 100px;类

高度不动。

CodePen

我更喜欢使用transition的解决方案，但如果没有可用的，我可以使用animation。我不是在寻找使用javascript的任何答案。

Answer 1

你不能用display来动画它。如果你给你的.submenu类一个overflow: hidden;，并删除display: none;，它将按预期动画，因为你已经从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>