动画实现不了

来源：6-2 封装形变类（2）

慕婉清6323512

2020-12-27 10:15:51

# 具体遇到的问题
老师看下为啥动不了
# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style type="text/css">
        .ball {
            background: linear-gradient(#ff9b9b 50%, #106dbb 50%);
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="ball">

    </div>
    <script type="text/javascript">
        //形变类
        class Transform {
            constructor(selector) {
                    this.el = document.querySelector(selector);
                    this._quene = [];
                    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._quene.push({
                        type,
                        value,
                        time
                    });
                    return this;
                }
                //添加动画完成 可以开始动了
            done() {
                    this._start();
                }
                //动画开始 从 _quene中把动画一个一个拿出来
            _start() {
                //先进先出
                setTimeout(() => {
                    const info = this._quene.shift();
                    this.el.style.transform = this._getTransform(info);
                }, 0);
            }
            _getTransform({
                type,
                value,
                time
            }) {
                switch (type) {
                    case 'translate':
                        return `translate(${ value })`;
                        break;
                    case 'scale':
                        return `scale(${ value })`;
                        break;
                    case 'rotate':
                        return `rotate(${ value })`;
                        break;
                }
            }
        }
        const tf = new Transform(".ball");
        tf
            .translate('200px,200px')
            .scale(2)
            .done;
        console.log(tf);
    </script>
</body>

</html>