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

由于元素的height是变化的，一个可能的选项可能是设置max-height属性而不是高值并使用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;
}

预览：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS幻灯片在没有设置高度的动画中

1 个答案: