前些天绘制轮播图时，发现轮播图中不同span标签内（样式不同）文字上下跳动。

为了防止眩晕在岗位上，需要对其进行改善，试了很多种方法，最后来总结一下：

我的轮播图template代码片段：

<div class='timer_shanxi_screen_outter'>
  <div class="timer_shanxi_screen">
      <div v-for='item,index in [...(dataChart?.dataList||[]),...(dataChart?.dataList||[])]' class='subject-card'>
          <div class='subject_index'>{{ (((index)%(dataChart.dataList.length)+1)>9?'':'0')+((index)%(dataChart.dataList.length)+1) }}</div>
          <div class='subject_number'>{{ item[0] }}</div>
          <div style='width: 150px;text-align: left;'>
              <span style='color: rgba(255, 173, 57, 1);font-size: 20px;vertical-align: middle;margin: 0 4px;'>{{ item[1] }}</span>
              <span style='position: relative; top: 2px;'>元</span>
          </div>
          <div>
              <span style='position: relative; top: 2px;'>库存</span>
              <span style='color: rgba(255, 173, 57, 1);font-size: 20px;vertical-align: middle;margin: 0 4px;'>{{ item[2] }}</span>
          </div>
      </div>
  </div>
</div>

（vue框架）data参考：

data: function () {
  return {
    // 定时器本器
    timmer: '',
    // 当前滚动top值
    currentTop: 0,
    dataChart: {
      dataList: [
        ["蛋糕","22","5件"],
        ["饼干","49","2件"],
        ["蛋挞","19","8件"],
        ["可乐","10","4件"],
        ["荔枝","5","23件"],
        ["巧克力","17","7件"],
        ["冰淇淋","9","4件"],
        ["仙人掌","22","1件"],
        ["土豆雷","3","50件"]
      ]
    }
  }
},

定时器方法参考：

this.timmer = window.setInterval(() => {
  this.currentTop-=1;
  if(document.querySelector('.timer_shanxi_screen')) {
      let timer_shanxi_screen = document.querySelector('.timer_shanxi_screen');
      let aimDomHeight = window.getComputedStyle(timer_shanxi_screen).height.split('px')[0]/2+5;
      if(aimDomHeight+this.currentTop<=0) {
          this.currentTop = 0
      }
      timer_shanxi_screen.style.transform = 'translateY('+this.currentTop+'px) translateZ(0) translate3d(0, 0, 0)';
  } else {
      window.clearInterval(this.timmer);
  }
},25)

实现方法：

1.首先将定时器外部容器添加下列属性，提升渲染的品质，以解决闪烁问题（会略降性能）：

.timer_shanxi_screen_outter {
        /* 。。。*/
        position: relative;
        transform: translate3d(0, 0, 0);
        -webkit-transform-style: preserve-3d; 
        -webkit-backface-visibility: hidden; 
        -webkit-perspective: 1000; 
        
}

2.将每个滚动的元素，除了translateY变动外，再额外添加两个条件（见上面的定时器方法图）:

translateZ(0) translate3d(0, 0, 0)

3.此时若内部还有标签闪动，对改标签追加下列属性,举例说明:

    .subject-card div span {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

然后闪动的问题就应该已经得到改善了。

希望本文会对您有所帮助~ ^_^