CSS 不设置高度的SlideIn动画

Question

我想复制 jQuery slideIn 和 slideOut，CSS。

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

.slider {
  transform: scaleY(0);
}

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

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

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

Answer 1

由于元素的 height 不同，一种可能的选择是设置 max-height property instead with a high value and use 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">

CSS 不设置高度的SlideIn动画

CSS SlideIn animation without setting height

html

css

css-transitions