使用css动画做无缝滚动时内容抖动问题

1.  
   .item-box {
2.  
   animation: item1 calc(v-bind('cList.length') * 1s) linear infinite;
3.  
   }
4.  
    
5.  
   .item-box:hover {
6.  
   animation-play-state: paused;
7.  
   }
8.  
    
9.  
   @keyframes item1 {
10.  
    0% {
11.  
    top: 0
12.  
    }
13.  
     
14.  
    100% {
15.  
    top: calc(v-bind('cList.length') * -1.5rem);
16.  
    }
17.  
    }

修改为

1.  
   .item-box {
2.  
   animation: item1 calc(v-bind('cList.length') * 1s) linear infinite;
3.  
   }
4.  
    
5.  
   .item-box:hover {
6.  
   animation-play-state: paused;
7.  
   }
8.  
    
9.  
   @keyframes item1 {
10.  
    0% {
11.  
    transform: translateY(0);
12.  
    }
13.  
     
14.  
    100% {
15.  
    transform: translateY(calc(v-bind('cList.length') * -1.5rem));
16.  
    }
17.  
    }

    通过调用translate，会启动硬件加速，即在GPU层对该元素进行渲染。这样，CPU就会相对解放出来进行其他的计算，GPU对样式的计算相对较快，且保证较大的帧率。

这篇好文章是转载于：学新通技术网