为具有display:none的元素设置动画效果？

Question

如何隐藏元素并使其过渡？

例:

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

所以点击我添加一个类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>