js控制节点样式变化,做到往前推动效果
监听某个值,改变节点样式,做到往前推动效果
不能同时改变两个,或两个以上节点样式,不然会有卡顿效果
watch: {
runTime(val, old) {
let pageNode = 50;
let bar = parseFloat(val % 50); //50个节点1P
let scaleVal = 1 + bar * (2 / 49); //放大1+1.5倍
let opacity1 = 1 - 0.05 * (bar - 29); //30后面(20个节点)节点开始透明,每节点透明度减0.05
let opacityTiem1 = 30; //(50-30个节点)
if (val < pageNode) {
if (bar >= opacityTiem1) {
//这里不能同时改变两个,或两个以上节点样式,不然页面会有卡顿效果
this.page3.style.cssText =
"opacity:" + opacity1 + ";transform:scale(" + scaleVal + ");";
} else {
//这里不能同时改变两个,或两个以上节点样式,不然页面会有卡顿效果
this.page3.style.transform = "scale(" + scaleVal + ")";
}
} else if (val < pageNode * 2) {
if (bar >= opacityTiem1) {
this.page4.style.cssText =
"opacity:" + opacity1 + ";transform:scale(" + scaleVal + ");";
} else {
this.page4.style.transform = "scale(" + scaleVal + ")";
}
}
},