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