老师_start中不加定时器，为什么会出现无动画现象？

无动画现象是不是因为transform先进行改变了，而transition 是后设置的所导致的？

// 形变类

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

}

// 添加动画

_add(type, value, time = this.defaultTime) {

this._queue.push({ type, value, time });

return this;

}

// 添加完成 可以开始动了

done() {

this._start();

}

// 开始动 从队列中把动画一个个拿出来

_start() {

if (!this._queue.length) return;

// 先进先出

// setTimeout(() => {

const info = this._queue.shift();

this.el.style.transform = this._getTransform(info);

// }, 0);

}

_getTransform({ time, value, type }) {

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('.ball');

tf

.translate('200px, 200px')

.done();

// console.log(tf);