起因
書接上文粪摘，一通操作搞出來的three動畫被否決之后為了追趕進度我又馬不停蹄的開始重做動畫枯芬。原本以為平面動畫應該很容易的，沒想到還是出了點問題碰辅。對于不同文字進行平移動畫懂昂，我覺得展現(xiàn)出一種雜亂無章的效果比較好，首先我采用了一種比較簡單的實現(xiàn)方法：列出3-4種動畫乎赴，然后給文字動態(tài)綁定動畫名稱忍法，結果出了點問題潮尝。
代碼
<div
class="qccenter-text"
v-for="(item, index) in config.drgs"
:key="`drgs-${index}`"
:style="textItemStyle(item, index)"
>
{{item.name}}
</div>
computed: {
// 文字塊樣式
textItemStyle() {
return function(item, index) {
const { left, top } = item;
const nameIndex = index % 4;
return {
left,
top,
'animation': `textMove${nameIndex} 4s linear infinite`,
};
};
}
},
css動畫示例榕吼，后面的只是每個時間點y軸坐標不同
@keyframes textMove0 {
0% {
transform: translateY(0);
}
20% {
transform: translateY(20%);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-20%);
}
100% {
transform: translateY(0);
}
}
config.drgs里面每一項保存文字的定位信息和內(nèi)容，然后給每一項添加不同的動畫——通過綁定不同的動畫名來實現(xiàn)勉失，然而動畫并沒有生效羹蚣。
瀏覽器上顯示animation屬性已經(jīng)綁定上去了，而且name也是正確的
image.png
原因
經(jīng)過一番查找資料發(fā)現(xiàn)是scoped在作怪乱凿，這個不知道是vue的bug還是特性就是如此顽素，要修改animation-name 就必須要在data-v-xxxx這個scoped下修改或者把動畫放到全局，最終我還是在全局樣式中寫入了動畫幀徒蟆，這下綁定的樣式終于生效了胁出，可惜代碼不優(yōu)雅。
原本我的設想是動態(tài)傳入動畫的位置段审，或者能在同一套動畫中設置不同元素的初始幀全蝶，結果看了一下api完全不知道從哪里下手，到最后我還是寫了4套動畫樣式然后如上所述取模來動態(tài)分配動畫名了。
后記
用threejs做動畫做了整整4天抑淫，純css動畫最后就用了半天绷落，果然熟悉而簡單的東西用起來還是得心應手。最后又得吐槽一下百度始苇，這搜索結果和google完全就不在一個檔次的好嗎砌烁。
參考內(nèi)容
Why are CSS keyframe animations broken in Vue components with scoped styling?
