将 var 添加到 css 类中

Posted 2023-02-22

【中文标题】将 var 添加到 css 类中

【英文标题】：Add var into css class

【发布时间】：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 中的类？

【参考方案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")