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);