html - css3 animation的問(wèn)題.我也不知道如何描述
問(wèn)題描述
<!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>
現(xiàn)在這個(gè)效果肯定不滿意， 當(dāng)我觸發(fā)事件時(shí)是一下跳出來(lái)了，因?yàn)閔eight:auto了，然后動(dòng)畫(huà)才開(kāi)始！！
要的效果是一個(gè)一個(gè)出來(lái).
多用動(dòng)畫(huà)， 進(jìn)軍移動(dòng)端了
問(wèn)題解答
回答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);} }
上面是修改方法。 無(wú)論是keyframes還是transition不要用height width,left,top,bottom,right等會(huì)引起reflow的屬性來(lái)作為變化參數(shù)。這段代碼里面，使用height來(lái)作為變化屬性導(dǎo)致了這個(gè)錯(cuò)誤，因?yàn)閔eight在不斷的改變，p的高度也在改變，導(dǎo)致瀏覽器一直在重排后來(lái)不及重繪，看到的就只有最后一下子跳出來(lái)的樣子。這段代碼放在移動(dòng)端估計(jì)會(huì)讓手機(jī)更卡頓。另外keyframe animation transform等如果在移動(dòng)端記得加webkit前綴。
相關(guān)文章：
1. docker綁定了nginx端口 外部訪問(wèn)不到2. 前端 - html5 audio不能播放3. javascript - 最近用echarts做統(tǒng)計(jì)圖時(shí)遇到兩個(gè)問(wèn)題！！4. javascript - 深夜被問(wèn)題困擾求解惑，rn的API之PermissionsAndroidd的問(wèn)題5. mysql - 我的myeclipse一直連顯示數(shù)據(jù)庫(kù)連接失敗，不知道為什么6. redis sentinel怎么跑守護(hù)進(jìn)程以及日志記錄位置的？7. android權(quán)限被第三方安全軟件禁止，如何獲取該權(quán)限狀態(tài)8. android - 優(yōu)酷的安卓及蘋(píng)果app還在使用flash技術(shù)嗎？9. 利用百度地圖API定位及附件商家信息服務(wù)10. nginx - ssl加密訪問(wèn)證書(shū)不受信任
網(wǎng)公網(wǎng)安備