为什么没有用继承,却实现了位移的同时,放大旋转
class Transform{
constructor(Selector){
this.el = document.querySelector(Selector);
this._queue = [];
this._transform = {
rotate: '',
translate: '',
scale: ''
};
this.defaultTime = Transform.config.defaultTime;
this.el.style.transition = `all ${.3}s `;
}
translate(value,time){
return this._add('translate',value,time)
}
scale(value,time){
return this._add('scale',value,time)
}
rotate(value,time){
return this._add('rotate',value,time)
}
_add(type, value ,time){
this._queue.push({type,value,time});
return this;
}
done(){
this._start();
}
_start(){
if(!this._queue.length) return;
setTimeout( () =>{
const info = this._queue.shift();
// console.log(this._getTransform(info));
// console.log(`all ${info.time / 1000}s`);
this.el.style.transition = `all ${info.time/1000 }s `;
this.el.style.transform = this._getTransform(info);
setTimeout( ()=>{
this._start();
}, info.time);
},0);
}
_getTransform({type,value,time}){
const _tsf = this._transform;
switch(type){
case 'translate':
_tsf.translate = `translate(${value})`;
break;
case 'scale':
_tsf.scale = `scale(${value})`;
break;
case 'rotate':
_tsf.rotate = `rotate(${value}deg)`;
}
return `${_tsf.translate} ${_tsf.scale} ${_tsf.rotate}`;
}
}
Transform.config = {
defaultTime: 300
};
Transform.config.defaultTime = 1000;
const tf = new Transform('.box');
tf
.translate('100px,100px')
.scale(2)
.rotate(90,3000)
.done();
console.log(tf);
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理,通过ES6基础知识和前端主流高级框架的学习,助你快速构建企业级移动webAPP应用,进入职场的终极battle
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星