css - 为显示 : 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>