小编Dra*_*rax的帖子

如何使用 Promise 链接 CSS 动画?

我试图弄清楚如何Promise工作并使一个 CSS 动画一个接一个地运行。但是它们同时运行......

JS小提琴

let move_boxes = () => {
    return new Promise( (resolve, reject) => {
        resolve ('boxes moved!')
    })
};
let move_box_one = () => {
    return new Promise( (resolve, reject) => {
        resolve (document.getElementById('div_two').style.animation = 'move 3s forwards')
        console.log('box one moved!')   
    })

}
let move_box_two = () => {
    return new Promise( (resolve, reject) => {
        resolve (document.getElementById('div_one').style.animation = 'move 3s forwards')
        console.log('box two moved!')       
    })
}

move_boxes().then(() => {
    return move_box_one();
}).then(() => { …
Run Code Online (Sandbox Code Playgroud)

javascript css-animations ecmascript-6 es6-promise

2
推荐指数
1
解决办法
1531
查看次数