按照国际惯例，先放效果图
index.html
<!DOCTYPE html> <html lang="en"head> Meta charset="UTF-8"title>index</style> .ball{ background:linear-gradient(pink 50%,lightblue 50%);/*css3线性渐变*/ width150px height border-radius50%; } bodydiv class="ball"></div> script> //形变类 class Transform{ constructor(selector){ this.el=document.querySelector(selector); .defaultTimeTransform.config.defaultTime;设置默认动画时长 .el.style.transition`all ${ .defaultTime }s`;设置transition才会有动画效果 ._queue[];队列，存放每一条动画 每次动画时，保留之前的不同类型的动画结果（直到被同类型的动画覆盖） ._transform{ rotate:"",translate: } } 位移 translate(value,time){ return ._add("translate缩放 scale(value,1)">scale旋转 rotate(value,1)">rotate添加动画 _add(type,time.defaultTime){ ._queue.push({type,time}); 方便链式调用 } 运动队列添加完成，开始正式动画 done(){ if(!._queue.length) return; 把动画从队列里拿出来，先进先出 定时器能够解决因为浏览器渲染机制造成的动画时有时无的情况 setTimeout(()=>{ const info._queue.shift();弹出队列里第一个 `all ${ info.time/1000 }s`; .el.style.transform._getTransform(info); setTimeout((){ .done(); },info.time); },0) } 获取具体的transform动画 _getTransform({time,type}){ const _tsf._transform; switch(type){ case : _tsf.translate`translate(${ value })`; break; : _tsf.scale`scale(${ value })`; : _tsf.rotate`rotate(${ value }deg)`; ; } `${ _tsf.translate } ${ _tsf.scale } ${ _tsf.rotate }`; } } 静态属性 Transform.config{ defaultTime:300默认动画时长 } 修改默认时长 Transform.config.defaultTime1000; 继承 class MultiTransform extends Transform{ 复合动画 multi(value,1)">multi等待 sleep(value){ sleep重写父类中的同名方法 : value.forEach(item{ ._getTransform(item); }) : 实例化 const tfnew MultiTransform(.ball); tf .translate(100px,100px) .scale(2) .sleep(500) .rotate(180) .multi([ { type:0,0 },{ type: } ]) .done(); console.log(tf); html>