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

＆＃13;

$('.menu').click(function(){
  $('.submenu').toggleClass('open');        
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: