html - 没有设置高度的CSS SlideIn动画

Question

我想用 CSS 复制 jQuery slideIn 和 slideOut。

ul {  
  background-color:yellow;
  transform-origin: top;
  transition: transform .5s;
}

.slider {
  transform: scaleY(0);
}

.slider 类将强制调整 UL 元素的大小。但是我的方法不考虑高度。我希望将高度调整为 0，这样我的示例中的按钮就会向上移动。

这是一个 JSBIN:http://jsbin.com/zoqiciwicu/1/edit

这甚至可以通过 CSS 实现吗？我没有要使用的设定高度。

Answer 1

由于元素的高度是变化的，一种可能的选择是设置max-height属性而不是高值(value)并使用 transition为了实现动画:

Updated Example

ul {  
  background-color:yellow;
  transform-origin: top;
  transition: all .5s ease-in-out;
  max-height: 50em;
}

.slider {
  transform: scaleY(0);
  max-height: 0;
}

预览:

$('input').click(function(){   
    $('ul').toggleClass("slider"); 
});

ul {  
  background-color:yellow;
  transform-origin: top;
  transition: all .5s ease-in-out;
  max-height: 50em;
}

.slider {
  transform: scaleY(0);
  max-height: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>    
<input type="button" value="slide">