JS实现animation({left: xx, duration: xx}).then(res => { console.log('动画执行完成');});

实现一个animation函数，在动画执行完成后之后，输出"动画执行完成"

基础知识

css动画
EventLoop 因为我们需要在动画执行完成之后输出内容，所以我们需要清楚dom是在什么时候更新的。dom更新是在所有微任务执行完成之后，才会更新。

题目分析

看到then可能不需要思考就会想到Promise
animation入参是一个对象，有left属性，那肯定是需要移动dom结构，且还有duration属性，那我们是不是可以充分利用css中的position和transition-druation属性

CSS + setTimeout

<style>
    .wrap {
        position: relative;
        height: 500px;
        background-color: antiquewhite;
    }
    .animation{
        position: absolute;
        left: 0;
        height: 100px;
        width: 100px;
        background-color: pink;
        transition-duration: 2s;
    }

</style>

<script>
    function animation(params) {
        return new Promise(resolve => {
            const animationDom = document.querySelector('.animation');
            animationDom.style.left = params.left;
            animationDom.style.transitionDuration = params.duration;
            setTimeout(() => {
                resolve();
            }, params.duration);
        });
    }
    window.onload = function() {
        animation({left: '300px', duration: 3000}).then(res => {
            console.log('动画执行完成');
        });
    }
</script>