資訊專欄INFORMATION COLUMN
摘要：關鍵字，，移動端，異常解決問題的辦法頁面加載完畢時延時給加上動畫類名。即在的鉤子中用定時器延時左右給需要動畫的加上類名。我在項目中的動畫，在中異常，動畫效果紊亂且不明顯。在的鉤子中將變為然后就可以看到動畫在中表現正常。
關鍵字：animation，ios，移動端，異常
解決問題的辦法：頁面dom加載完畢時延時給dom加上動畫類名。即在vue的mounted鉤子中用定時器延時100ms左右給需要動畫的dom加上類名。
我們在寫動畫的時候常常會遇到添加簡單css動畫的需求，首選利用animation和@keyframe來實現。當需要一個無限動畫的時候，animation相對于transition來說有一個優勢。不用js就可以一直執行動畫。
我在vue項目中的animation動畫，在iphone中異常，動畫效果紊亂且不明顯。
解決辦法：
1.現在樣式表中寫入動畫樣式：
/*箭頭本身樣式*/
.next-arrow
width: .5rem;
position: absolute;
left:50%;
bottom: 1rem;
transition: translate(-50%,0)
/*css動畫樣式,此處用sass*/
.next-arrow-animation
animation: 1.2s float infinite ease-in;
/*動畫內容*/
@keyframes float {
0% {
bottom: 1rem;
}
100% {
bottom: .5rem;
}
}
2.在vue的data中加入對應的控制類名的布爾值
data() {
return {
animation: false
};
}
3.vue模板中,此處用的pug。
img.next-arrow(:class="{"next-arrow-animation":animation}")
4.在vue的mounted鉤子中將animation變為true
mounted() {
setTimeout(() => {
this.animation=true
}, 100);
}
然后就可以看到動畫在ios中表現正常。100ms是個經驗值，可以改變。
如果不是用的vue且遭遇到了同樣問題，可用同樣思路延時操作dom，給其添加動畫類名，即可解決。
至于為什么會出現這種情況，我目前沒有深入調查。
等有時間，如果調查出來會補上。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117395.html
摘要：頁面調試騰訊開發維護的代碼調試發布，錯誤監控上報，用戶問題定位。同樣是由騰訊開發維護的代碼調試工具，是針對移動端的調試工具。前端業務代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。 本人微信公眾號：前端修煉之路，歡迎關注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....
摘要：支持動畫狀態的，在動畫開始，執行中，結束時提供回調函數支持動畫可以自定義貝塞爾曲線任何包含數值的屬性都可以設置動畫倉庫文檔演示功能介紹一定程度上，也是一個動畫庫，適用所有的屬性，并且實現的能更方便的實現幀動畫，替代復雜的定義方式。 動畫調研-V1 前言：動畫從用途上可以分為兩種，一種是展示型的動畫，類似于一張GIF圖，或者一段視頻，另一種就是交互性的動畫。這兩種都有具體的應用場景，比如...
摘要：超過的，是一個動畫庫，可以處理屬性，單個轉換，或任何屬性以及對象。在，是一個快速的動畫引擎，具有與的相同的。在，這個功能和反應動畫庫只重。由和其他人使用，這個庫既流行又令人驚訝地有用。 在瀏覽網頁尋找一個整潔的Javascript動畫庫時，我發現很多recommended的動畫庫一段時間都沒有維護。 經過一些研究，我收集了11個最好的庫，在你的應用程序中使用。我還添加了一些，主要是非維...
閱讀 1763·2021-09-23 11:34
閱讀 2485·2021-09-22 15:45
閱讀 13010·2021-09-22 15:07
閱讀 2248·2021-09-02 15:40
閱讀 4154·2021-07-29 14:48
閱讀 1087·2019-08-30 15:55
閱讀 3252·2019-08-30 15:55
閱讀 2199·2019-08-30 15:55
