起因
书接上文，一通操作搞出来的three动画被否决之后为了追赶进度我又马不停蹄的开始重做动画。原本以为平面动画应该很容易的，没想到还是出了点问题。对于不同文字进行平移动画，我觉得展现出一种杂乱无章的效果比较好，首先我采用了一种比较简单的实现方法：列出3-4种动画，然后给文字动态绑定动画名称，结果出了点问题。
代码
<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里面每一项保存文字的定位信息和内容，然后给每一项添加不同的动画——通过绑定不同的动画名来实现，然而动画并没有生效。
浏览器上显示animation属性已经绑定上去了，而且name也是正确的
image.png
原因
经过一番查找资料发现是scoped在作怪，这个不知道是vue的bug还是特性就是如此，要修改animation-name 就必须要在data-v-xxxx这个scoped下修改或者把动画放到全局，最终我还是在全局样式中写入了动画帧，这下绑定的样式终于生效了，可惜代码不优雅。
原本我的设想是动态传入动画的位置，或者能在同一套动画中设置不同元素的初始帧，结果看了一下api完全不知道从哪里下手，到最后我还是写了4套动画样式然后如上所述取模来动态分配动画名了。
后记
用threejs做动画做了整整4天，纯css动画最后就用了半天，果然熟悉而简单的东西用起来还是得心应手。最后又得吐槽一下百度，这搜索结果和google完全就不在一个档次的好吗。
参考内容
Why are CSS keyframe animations broken in Vue components with scoped styling?
