<!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了，然后动画才开始！！
要的效果是一个一个出来.
多用动画， 进军移动端了
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The above is the modification method. Whether it is keyframes or transition, do not use attributes such as height width, left, top, bottom, right, etc. that will cause reflow as change parameters. In this code, using height as the changing attribute caused this error, because the height is constantly changing, and the height of p is also changing, causing the browser to keep rearranging and then not being able to redraw, and all that is seen is the last moment. The way it jumped out. Putting this code on the mobile side will probably make the phone lag even more.
In addition, if you use keyframe animation transform, etc. on the mobile terminal, remember to add the webkit prefix.