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了，然后动画才开始！！
要的效果是一个一个出来.
多用动画， 进军移动端了
问题解答
回答1：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在不断的改变，p的高度也在改变，导致浏览器一直在重排后来不及重绘，看到的就只有最后一下子跳出来的样子。这段代码放在移动端估计会让手机更卡顿。另外keyframe animation transform等如果在移动端记得加webkit前缀。
相关文章：
1. Docker for Mac 创建的dnsmasq容器连不上/不工作的问题2. dockerfile - 我用docker build的时候出现下边问题 麻烦帮我看一下3. debian - docker依赖的aufs-tools源码哪里可以找到啊？4. dockerfile - 为什么docker容器启动不了？5. docker 下面创建的IMAGE 他们的 ID 一样？这个是怎么回事？？？？6. angular.js - angular内容过长展开收起效果7. docker - 各位电脑上有多少个容器啊？容器一多，自己都搞混了，咋办呢？8. mac连接阿里云docker集群，已经卡了2天了，求问？9. javascript - sublime快键键问题10. 关docker hub上有些镜像的tag被标记““This image has vulnerabilities””
网公网安备