进度条动画的几种实现方式

最新推荐文章于 2024-08-02 12:45:00 发布

瑞瑞w

最新推荐文章于 2024-08-02 12:45:00 发布

阅读量602

点赞数

本文链接：https://blog.csdn.net/wang9rui/article/details/113612253

版权

1.动态使用aninamtion:
const head = document.getElementsByTagName('head')[0];
  const style = document.createElement('style');
  const styleText = document.createTextNode(
  `@keyframes proAni {
       0%{width:0;}
       100% {
            width:${进度的百分比}%;
       }
    }
    @-webkit-keyframes proAni {
         0%{width:0;}
         100% {
            width:${进度的百分比}%;
           }
         }
      `
     );
    style.appendChild(styleText);
    head.appendChild(style);
2.使用transition,控制宽度
function change(){
    clearTimeout(this.timer);
    this.timer = null;
    this.timer = setTimeout(() => {
    this.preI += 1;
    if (this.preI === 进度条的百分比) {
       clearTimeout(this.timer);
       this.timer = null;
     } else {
         change();
     }
    }, 30);
}
3.使用transition,控制宽度，使用requestAnimationFrame代替setTimeout/setInterval,具体为什么可以查阅一下资料
function change() {
   this.preI += 1;
   if (this.preI <= 进度条的百分比) {
       requestAnimationFrame(change)
   }