为什么没有用继承,却实现了位移的同时,放大旋转

为什么没有用继承,却实现了位移的同时,放大旋转

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

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕慕子 2019-12-06 18:16:12

同学你好,如下所示, 因为后面调用translate等方法的时候值传入了值,没有设置时间,而且同学的代码中_add方法没有设置time默认值,所以是同时进行效果的改变。添加上就好了,示例:

http://img1.sycdn.imooc.com//climg/5dea2a1a094b0c9e06300132.jpg

如果帮助到了你,欢迎采纳,祝学习愉快~

好帮手慕慕子 2019-12-06 13:55:52

同学你好,如下所示,位移,缩放,旋转方法内部调用了_add方法,每次调用 _add方法返回this指向当前的实例对象。

http://img1.sycdn.imooc.com//climg/5de9ecf10948e33808430385.jpg

所以,后面可以使用链式调用的书写方式调用方法,实现效果

http://img1.sycdn.imooc.com//climg/5de9ed55095821d604250220.jpg

如果帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 at_ #1
    老师写的代码不是同步的,而是先位移-放缩-旋转,没看到代码有什么不同
    2019-12-06 15:08:39
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师