vue动态绑定animation-name与未能实现的随机帧动画

起因

书接上文，一通操作搞出来的three动画被否决之后为了追赶进度我又马不停蹄的开始重做动画。原本以为平面动画应该很容易的，没想到还是出了点问题。对于不同文字进行平移动画，我觉得展现出一种杂乱无章的效果比较好，首先我采用了一种比较简单的实现方法：列出3-4种动画，然后给文字动态绑定动画名称，结果出了点问题。

代码

    

      {{item.name}}
    

  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?