vue中的动态keyframes参数

最近在负责项目中大屏模块,遇到了点小问题.现在来记录下先来讲下项目是基于Vue现要在keyframes中动态的传递高度(top)。最后的效果如下图（主要涉及到动画效果,中间部分左右两边不说）：### 主要思路使用animation配合@keyframes来使用上下移动动画**问题1：** 如何将不同柱子的top值传递给@keyframes中?使用==document.styleSheets[0].

风中依旧笑着过

3062人浏览 · 2021-09-28 16:12:45

风中依旧笑着过 · 2021-09-28 16:12:45 发布

最近在负责项目中大屏模块,遇到了点小问题.现在来记录下先来讲下项目是基于Vue现要在keyframes中动态的传递高度(top)。最后的效果如下图（主要涉及到动画效果,中间部分左右两边不说）：

主要思路

使用animation配合@keyframes来使用上下移动动画

问题1：如何将不同柱子的top值传递给@keyframes中?用 document.styleSheets[0].insertRule

在请求后端成功后进行的操作:

document.styleSheets[0].insertRule(
    "@keyframes tbMove" + index + "" +
    "{" +
    "0%{top: " + topValue + "px;}" +
    "50%{top: " + (topValue + 15) + "px;}" +
    "100%{top: " + topValue + "px;}" +
    "}"
)
document.styleSheets[0].insertRule(".tbmovestyle" + index + "{" +
    "animation: tbMove"+index+" 4s infinite;" +
    "}"
)

以上代码相当于在页面中插入了 .tbmovestyle 和 @keyframes tbMove + index 样式.可以通过以下代码查看页面样式

console.log("document", document.styleSheets[0])

随后在使用的地方动态绑定即可,参考例子:

<div v-for="(item,index) in centerMsg" :style="{'left':item.LEFT,'top':item.TOP}"
           :class="{
           'tbmovestyle0':index==0,
           'tbmovestyle1':index==1,
           'tbmovestyle2':index==2,
           'tbmovestyle3':index==3,
           'tbmovestyle4':index==4,
           'tbmovestyle5':index==5,
           'tbmovestyle6':index==6,
           'tbmovestyle7':index==7,
           'tbmovestyle8':index==8,
           'tbmovestyle9':index==9,
           'tbmovestyle10':index==10,
           'tbmovestyle11':index==11,
           }"></div>

以上就是我对Vue中@keyframes动态参数的认识,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。