css使用var()函数，绑定动态变量

css使用var()函数，绑定动态变量

template

// 这里使用的是uniapp开发小程序，view标签
// 取个别名接受所需要使用的动态值
// :style="{ '--y': moveY, '--x': moveX }"
<view v-show="isShowDh && isSelectIndex === index" class="dh-icon" :class="{ 'one-goods-dh': isShowDh }" :style="{ '--y': moveY, '--x': moveX }"></view>

js

// 这就是想要使用动态的数据作为css的值
this.moveY = `-${data.top - this.titleBarTop - cartTop}px`;
this.moveX = `${this.cartLeft - data.left}px`;

css

// 此处代码简略贴出，重点在于使用
// transform: translate(var(--x), var(--y));
@keyframes dhTbMove {
	0% {
		transform: translate(0, 0);
	    }

	100% {
		transform: translate(var(--x), var(--y));
		}
}