class Transform {
    constructor(selector) {
        this.el = document.querySelector(selector);
        // this.el指的是div.ball这个DOM元素，这句话的意思是每个实例化的对象上都有el这个属性，el属性是用来存储获取的DOM元素的
        this._transform = {
            translate: '',
            scale: '',
            rotate: ''
        }
        this.defaultTime = Transform.config.defaultTime;
        this._queue = [];
        this.el.style.transition = `all ${.3}s`;
    }
    // 总结：this.方法() 只能在类的内部调用，this指向实例化对象。
    //位移
    translate(value, time){
        // console.log(this === tf) 
        // 这里的this指tf这个实例化对象
        // 第一个return是把this._add方法整个返回，然后才能把this._add方法中的return this;返回，第二个return是把tf对象返回，否则translate的调用只是把函数执行了一遍，translate生效，但是scale不会生效，因为只有tf对象上有scale方法，下面同理
        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){
        // console.log(this)
        this._queue.push({ type, value, time })
        return this;
    }
    // 动画准备好了，可以开始动了
    done(){
        this._start(); 
    }
    // 动画准备开始 从队列中把动画一个个拿出来，先进先出
    _start(){
        setTimeout( () =>{
            if(!this._queue.length) return;  //队列为空，结束动画
            const info = this._queue.shift(); //取出数组第一项
            // console.log(info)
            // console.log(`all ${info.time/1000}s`)
            this.el.style.transition = `all ${info.time/1000}s`
            this.el.style.transform = this._getTransform(info);
            // 接收数组第一项，执行_getTransform方法，并返回css属性
            setTimeout(() =>{
                this._start(); // 这里是递归操作，上一项动画执行完后执行下一步操作。
            }, info.time)
        }, 0)
    }
    _getTransform({type, value}){
        const _tsf = this._transform;
        switch (type) {
            case 'translate':
                // ${value}什么意思？
                _tsf.translate = `translate(${value})`;
                break;
            case 'scale':
                _tsf.scale = `scale(${value})`;
                break;
            case 'rotate':
                _tsf.rotate = `rotate(${value}deg)`;
                break;
        }
        // console.log(_tsf.translate)
        return `${ _tsf.translate } ${ _tsf.scale } ${ _tsf.rotate }`;
    }
}
// 静态属性，初始化用的
Transform.config = {
    defaultTime: 500
}

Transform.config.defaultTime = 1000;


// 继承 
class MultiTransform extends Transform {
    multi(value ,time){
        return this._add('multi', value, time);
    }
    sleep(value, time){
        return this._add('sleep', value, time);
    }
    _getTransform({type, value}){
        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)`;
                break;
            case 'multi':
                value.forEach(item => {
                    this._getTransform(item);
                });
                // value.forEach(function(item) {
                //     console.log(item)
                //     tf._getTransform(item);
                // });这里不是箭头函数，this不能指向tf，所以只能用tf
                break;
            case 'sleep':
                break;
        }
        return `${ _tsf.translate } ${ _tsf.scale } ${ _tsf.rotate }`;
    }
}

const tf = new MultiTransform('.ball');
tf
.translate('100px, 100px')
.scale(2)
.sleep(null, 5000)
.rotate(180, 2000)
.multi([
    {
        type:'translate',
        value: '0, 0'
    },
    {
        type:'scale',
        value: 1.5
    }
])
.done();
// console.log(tf)

1、帮我看看注释的地方对不对。

2、break的作用以及含义，我不加好像也没事，请结合代码举例说详细点，谢谢。