将 var 添加到 css 类中答案

【问题标题】：Add var into css class将 var 添加到 css 类中
【发布时间】：2020-11-04 16:16:21
【问题描述】：

我目前正在编写一个循环制作动画的组件，动画时间是传递给组件的道具。

我的问题如下：动画是用 CSS 制作的：

animate:{
   -webkit-transition: 10.0s !important;
   -moz-transition: 10.0s !important;
   -o-transition: 10.0s !important;
   transition: 10.0s !important;
}

我想在这个类声明中传递持续时间，但这似乎是不可能的，我正在使用这些 CSS 技巧来重新启动动画：https://css-tricks.com/restart-css-animation/ 这包括一个类的使用。

有什么方法可以在 Vue.js 中用 vars 初始化一个类，或者在循环中制作一个以持续时间为参数的 CSS 动画？

【问题讨论】：

你可以做类似 document.getElementById("myDIV").style.transitionDuration = this.props.duration
CSS 是静态的，所以你只能在运行时修改 DOM 中的元素来改变它
是的，我就是这么想的，有没有一种很好的方法来重置 Vue.js 中的动画而不需要上面的 css 技巧或编辑已经声明到 dom 中的类？

标签： css vue.js vue-component css-animations

【解决方案1】：

如果你使用变量，css 不是静态的可以吗

:root{
   --primary-animation:10s;
}

animate:{
   -webkit-transition: var(--primary-animation) !important;
   -moz-transition: var(--primary-animation) !important;
   -o-transition: var(--primary-animation) !important;
   transition: var(--primary-animation) !important;
}

在组件上

created(){
  document.documentElement.style.setProperty('--primary-animation', this.myCustomProperty+"s")

}

【讨论】：