将var添加到CSS类 [英] Add var into css class

问题描述

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

I'm currently writing a component that is making an animation in a loop, the animation time is a props passed to the component.

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

My problem is the following: The animation is made in CSS:

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

我想在该类声明中传递持续时间，但是似乎不可能，并且我正在使用以下CSS技巧重新启动动画:

I would want to pass the duration inside this class declaration but it seems impossible and I'm using these CSS tricks to restart the animation: https://css-tricks.com/restart-css-animation/ that is including the usage of a class.

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

Is there any way to init a class with vars in Vue.js or to make a CSS animation in a loop with duration as a parameter ?

推荐答案

如果使用变量，css不是静态的你能做

css isn't static if you use variables could you do

: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")

}

这篇关于将var添加到CSS类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！