<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.wrapper{
width:500px;
height:200px;
border:1px solid red;
margin:0 auto;
overflow:hidden;
}
ul{
height:100px;
outline:1px solid red
}
li{
list-style:outside none none;
}
ul:nth-child(3).active{
display:block;
animation: animate ease-in-out 0s 0s ;
}
ul:nth-child(4).active{
display:block;
animation: animate ease-in-out 1s .5s ;
}
ul:nth-child(5).active{
display:block;
animation: animate ease-in-out 2s .5s ;
}
@keyframes animate{
0%{
height:0;
}
100%{
height:100%;
}
}
</style>
</head>
<body>
<div class="wrapper">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul style='background:red'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul style='background:red'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul style='background:red'>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p>click</p>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('p').click(function(){
$('div').css('height', 'initial');
$('ul:gt(1)').toggleClass('active');
});
});
</script>
</body>
</html>
现在这个效果肯定不满意， 当我触发事件时是一下跳出来了，因为height:auto了，然后动画才开始！！
要的效果是一个一个出来.
多用动画， 进军移动端了
ul:nth-child(3).active{
display:block;
animation: animate ease-in-out 0s 0s backwards;
}
ul:nth-child(4).active{
display:block;
animation: animate ease-in-out 1s .5s backwards;
}
ul:nth-child(5).active{
display:block;
animation: animate ease-in-out 2s .5s backwards;
}
@keyframes animate{
0%{
transform:scaleY(0);
}
100%{
transform:scaleY(1);
}
}
上面是修改方法。 无论是keyframes还是transition不要用height width,left,top,bottom,right等会引起reflow的属性来作为变化参数。这段代码里面，使用height来作为变化属性导致了这个错误，因为height在不断的改变，div的高度也在改变，导致浏览器一直在重排后来不及重绘，看到的就只有最后一下子跳出来的样子。这段代码放在移动端估计会让手机更卡顿。
另外keyframe animation transform等如果在移动端记得加webkit前缀。