javascript - 为什么 CSS 的动画属性在 Vue.js 中不起作用？

Question

我尝试在 Vue.js 中动态绑定(bind) CSS 的 animation 属性，以便根据其他变量更改动画。我的实现如下:

<template>
    <div>
        <div :style="{transform: getTrans(), animation: getAni()}">Test</div>
    </div>
</template>

<script>
    import Vue from "vue";
    export default {
      name: "Lottery",
      methods: {
        getTrans() {
          return "rotateX(120deg)";
        },
        getAni() {
          return "back-spin 5s linear 0s 1 normal none running;";
        }
      }
    };
</script>

但是当我运行代码时，我在div 的CSS 样式中看不到animation 属性。并且动画没有开始。当我动态绑定(bind)它的值时，为什么 CSS 的 animation 属性在 Vue.js 中不起作用？

完整代码是here .

Answer 1

你的动画参数有一个额外的';'在引号 ""之间

return "back-spin 5s linear 0s 1 normal none running;";

删除多余的';'并且参数应该出现(参见 jsfiddle )

return "back-spin 5s linear 0s 1 normal none running";