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