js/jQuery中监视dom等待动画结束执行下一段代码/async/await/promise

jquery animate 动画结束回调

单个回调

$("dom").animate({},"normal",function(){
  console.log("动画执行完毕！"); //返回Promis成功播报
}  

多个回调

//方法一
$("dom").animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
}, {
    duration: 1000,
    easing: 'swing',
    complete: function() {
        // 第一个动画结束后要执行的操作
        console.log("第一个动画已完成");
    }
}).animate({
    opacity: 1,
    left: '-=50',
    height: 'toggle'
}, {
    duration: 1000,
    easing: 'swing',
    complete: function() {
        // 第二个动画结束后要执行的操作
        console.log("第二个动画已完成");
    }
});

//方法二
$.when(
    $("dom").animate({
        opacity: 0.25,
        left: '+=50',
        height: 'toggle'
    }, {
        duration: 1000,
        easing: 'swing'
    }),
    $("dom").animate({
        opacity: 1,
        left: '-=50',
        height: 'toggle'
    }, {
        duration: 1000,
        easing: 'swing'
    })
).then(function() {
    // 所有动画完成后要执行的操作
    console.log("所有动画已完成");
});

javascript animate 动画结束回调

单个回调

const element = document.getElementById('myElement');
const animation = element.animate(
    [
        { transform: `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})` },
        { transform: 'none' },
    ],
    {
        duration: 250,
        easing: 'ease-out',
    }
);

animation.addEventListener('finish', () => {
    // 在此处添加动画结束时需要执行的操作
});

多个回调

const element1 = document.getElementById('myElement1');
const animation1 = element1.animate(
    [
        { transform: `translate(${translateX}px, ${translateY}px) scale(${scaleX}, ${scaleY})` },
        { transform: 'none' },
    ],
    {
        duration: 250,
        easing: 'ease-out',
    }
);

const element2 = document.getElementById('myElement2');
const animation2 = element2.animate(
    [
        { opacity: 0 },
        { opacity: 1 },
    ],
    {
        duration: 500,
        easing: 'linear',
    }
);

// 创建一个包含所有动画的Promise数组
const promises = [animation1.finished, animation2.finished];

// 使用Promise.all()方法等待所有动画都完成
Promise.all(promises).then(() => {
    // 在此处添加当所有动画都完成后需要执行的操作
});

来源：ChatGPT3.5