click
现在这个效果肯定不满意, 当我触发事件时是一下跳出来了,因为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在不断的改变,p的高度也在改变,导致浏览器一直在重排后来不及重绘,看到的就只有最后一下子跳出来的样子。这段代码放在移动端估计会让手机更卡顿。
另外keyframe animation transform等如果在移动端记得加webkit前缀。