为什么无法旋转（自己写

class Transform {

constructor(selector) {

this.el = document.querySelector(selector);

this._queue = [];

this._transform = {

rotate: "",

translate: "",

scale: "",

};

// 装_queue时间分支

this.actTime = [];

this.defaultTime = Transform.config.defaultTime;

this.el.style.transition = `all ${0.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.defaultTime) {

this._queue.push({

type,

value,

time,

});

return this;

}

//添加完成，可以开始

done() {

this._start();

}

_start() {

let length = this._queue.length;

for (let index = 0; index < length; index++) {

let queueArg = this._queue.shift();

this.actTime.push(queueArg.time);

this._getTransform(queueArg);

}

console.log(this.actTime);

console.log(this._transform);

if (!this._queue.length)

return this.getResult();

}

// 用于修改css

_getTransform({ time, value, type }) {

switch (type) {

case "translate":

this._transform.translate = `translate(${value})`;

break;

case "scale":

this._transform.scale = `scale(${value})`;

break;

case "rotate":

this._transform.rotate = `rotate(${value}deg)`;

break;

}

getResult() {

let values = this._transform;

let arr = [];

//把对象转成数组

for (let i in values) {

arr.push(values[i]);

}

console.log(arr);

let vLength = arr.length;

for (let index = 0; index < vLength; index++) {

setTimeout(() => {

this.el.style.transition = `all ${this.actTime[index] / 1000}s`;

// if(arr[index] == 'rotate(90deg)') this.el.style.transform = arr[index];

this.el.style.transform = arr[index];

console.log(index);

}, this.actTime[index]);

}

Transform.config = {

defaultTime: 800,

};

const tf = new Transform("#ball");

console.log(tf);

class MultiTransform extends Transform {}

tf.translate("190px,300px")

.scale(1.2)

.rotate(90, 2000)

.done();

html

<!DOCTYPE html>

<html>

<head>

<style>

#ball {

width: 200px;

height: 200px;

background:linear-gradient(#e66465 50%, #9198e5 50%);

border-radius: 50%;

}

</style>

</head>

<body>

</body>

</html>

慕尼黑7895541 2020-12-21

源自：ES6 class 6-3 封装形变类（3）

收起

1回答

好帮手慕星星 2020-12-21 16:39:50

同学你好，代码问题如下：

1、初始定义了_transform数据顺序

然后getResult方法中按照定义的顺序赋值给了arr，那么动画的顺序就是_transform中的顺序，而不是调用动画的顺序。可以输入arr看看，和_queue队列顺序不同

那么动画和时间顺序就会对应不上，800对应rotate，800对应translate，2000对应scale 。而前面两个动画时间相同，transform就会进行覆盖，后面覆盖前面的，所以看不到rotate动画。如果将translate动画添加不同的时间就可以看到效果。例如：

2、建议按照课程中修改，不添加getResult方法，如下

可以再测试下，祝学习愉快！

收起回答

提问者慕尼黑7895541 #1

for (let index = 0; index < vLength; index++) {
            setTimeout(() => {
                this.el.style.transition = `all ${this.actTime[index] / 1000}s`;
                // if(arr[index] == 'rotate(90deg)') this.el.style.transform = arr[index];
                this.el.style.transform = arr[index];
                console.log(index);
            }, this.actTime[index]);
        }

setTimeout在for循环中不能同步执行，有什么办法让其同步执行？？

2020-12-23 01:15:07
提问者慕尼黑7895541 #2

网上这种方法也不行
let that = this;
for (let index = 0; index < vLength; index++) {
(function(index) {
setTimeout(() => {
that.el.style.transition = `all ${that.actTime[index] / 1000}s`;
// if(arr[index] == 'rotate(90deg)') this.el.style.transform = arr[index];
that.el.style.transform = arr[index];
console.log(index);
}, that.actTime[index]);
})(index);
}

2020-12-23 01:22:44
好帮手慕星星回复提问者慕尼黑7895541 #3

你好，这边多次测试代码，无法将定时器修改为同步执行，所以建议不要考虑自己写的那种效果了，按照视频中的方式完成即可。祝学习愉快！

2020-12-23 14:37:50