html - css3 animation的问题.我也不知道如何描述
<!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>
<p 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>
</p>
<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(){
$('p').css('height', 'initial');
$('ul:gt(1)').toggleClass('active');
});
});
</script>
</body>
</html>
现在这个效果肯定不满意， 当我触发事件时是一下跳出来了，因为height:auto了，然后动画才开始！！
要的效果是一个一个出来.
多用动画， 进军移动端了
