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

Question

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

<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>

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

完整的代码在这里。

Answer 1

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

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

删除多余的";"，参数应该显示出来（参见jsfiddle）

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