公司项目中有个动画需求,如果直接在js中写动画会导致无法规避的bug。
所以就想到了看能不能在css中获取js中动态保存的变量。
解决方法:
:style="{'--自己设的名字:保存在data的变量'}"
为了更好理解,我写个demo
<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函数我们定义的属性
如果想要学习更多关于css变量的内容,推荐大家康康这个:
阮一峰教程 (https://www.ruanyifeng.com/blog/2017/05/css-variables.html)