js控制样式，页面往前效果

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 + ")";
        }
      }
  },