使用ES6的class封装一个css3动画形变类

最新推荐文章于 2024-06-12 17:14:16 发布

泉白水

最新推荐文章于 2024-06-12 17:14:16 发布

阅读量165

点赞数

分类专栏：前端文章标签： javascript es6

本文链接：https://blog.csdn.net/QUANBAI/article/details/115445426

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>封装类</title>
  <style type="text/css">
  .ball{
    width: 20px;
    height: 20px;
    background-color: rgba(6, 138, 39, 0.61);
    margin: 0 auto;
  }
  </style> 
</head>
<body>
  <div class="ball"></div>
 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> 
 <script src="index.js"></script>
</body>
</html>

JS文件index.js

class move{
  constructor(el){
    this.el=document.querySelector(el);
    this._queue=[];
    this._transform={
      translate:'',
      rotate:'',
      scale:''
      
    };
    this.defaultTime = move.config.defaultTime;
    this.el.style.transition=`all ${this.defaultTime}s`;
    }
    //位移
    translate(value,time){
      this._add('translate',value,time);
      return this;
    }
    //缩放
    scale(value,time){
      this._add('scale',value,time);
      return this;
    }
    //旋转
    rotate(value,time){
      this._add('rotate',value,time);
      return this;
    }
    //多个形变一起运动
    multi(value,time){
      this._add('multi',value,time);
      return this;
    }
    //休眠
    sleep(time){
      this._add('sleep','',time);
      return this;
    }
  //内部函数
  _add(type,value,time){
    this._queue.push({type,value,time});
   
  }
  //开始动
  done(){
    this._start();
  }
  _start(){
    if (this._queue.length<=0)return;//当所有元素均出队列后，返回
    setTimeout(()=>{                  //最外层的setTimeout是为了防止浏览器渲染问题
      const{type,value,time=this.defaultTime}=this._queue.shift();
      this.el.style.transition = `all ${time}s`;
      this.el.style.transform = this._start_value(type,value);

      setTimeout(() => {//递归方法
				this._start();
			}, time*1000);
    },0);
  
  }
  _start_value(type,value){//获取transform的属性值
    switch(type){
      case 'translate':
        this._transform.translate= `translate(${value})`;
        break;
      case 'scale':
        this._transform.scale= `scale(${value})`;
        break;
      case 'rotate':
        this._transform.rotate= `rotate(${value})`;
        break;
        case 'multi':
          value.forEach(item => {
            this._start_value(item.type,item.value);
          });
          case 'sleep':
				break;
      default:
        break;
    }
    return`${this._transform.translate} ${this._transform.scale} ${this._transform.rotate}`;
  }
}
move.config = {
	defaultTime: .3//默认的运动时间
};
const ball = new move('.ball','.3');//新建实例
ball.translate('100px,100px')//使用
    .rotate('45deg')
    .translate('200px,100px')
    .sleep(2)
    .multi([
      {
        type: 'translate',
        value: '0, 0'
      },
      {
        type: 'rotate',
        value: '90deg'
      }
    ],4)
    .done();

效果

泉白水

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用ES6的class封装一个css3动画形变类

HTML文件index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
复制链接

扫一扫