Utilice variables guardadas en js en css // asigne variables js a css

Existe un requisito de animación en el proyecto de la empresa: si escribe la animación directamente en js, se producirán errores inevitables.

Entonces pensé en ver si podía obtener las variables guardadas dinámicamente en js en css.

Solución:

:style="{'--tu propio nombre: una variable guardada en datos'}"

Para una mejor comprensión, escribo una demostración.

<div class="box-lt" :style="{'--top':TopHeight}" class="box"> 
 1. 去定义你想设置的属性  eg： top  注意前面有-- ， 后面是保存在data的js变量

js 里：
click某点击事件（e）{
this.TopHeight = e.currentTarget.offsetTop
比如我需要保存一个在js中获取的动态高度
}
data() {
     return {
    	 TopHeight:''
     }
 }

css里：
.box{
       transform:translateY ( var(--top));
    }

注意css中需要用var函数我们定义的属性

Si quieres aprender más sobre las variables css, te recomiendo este:

Tutorial de Ruan Yifeng (https://www.ruanyifeng.com/blog/2017/05/css-variables.html)