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. javascript - 奇怪的Symbol的問題2. angular.js - angular ng-class里面的引號問題3. docker - 如何修改運行中容器的配置4. javascript - 有沒有什么好的圖片懶加載的插件，需要包含監聽頁面滾動高度，然后再加載的功能5. javascript - history.replaceState()無法改變query參數6. 網頁爬蟲 - 用Python3的requests庫模擬登陸Bilibili總是提示驗證碼錯誤怎么辦?7. mysql無法添加外鍵8. matplotlib - python函數的問題9. javascript - vue過渡效果 css過渡 類名的先后順序10. javascript - es6將類數組轉化成數組的問題
網公網安備