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.

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

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.

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 ?

回答1:

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

and on component

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

}

来源：https://stackoverflow.com/questions/62910230/add-var-into-css-class