如何确定元素内所有动画已经结束？

可以使用JavaScript的animationend事件来监听CSS动画的结束事件，并配合Promise对象实现异步操作。具体步骤如下：

1. 获取需要监听的元素 const myElement = document.querySelector('#myElement');

2. 创建一个Promise对象，并在动画结束时resolve该Promise对象 function waitForAnimationEnd(elem) { return new Promise((resolve) => { elem.addEventListener('animationend', function animationEndCallback() { elem.removeEventListener('animationend', animationEndCallback); resolve(); }); }); }

3. 在元素执行完所有动画后执行相应操作 async function doSomething() { await waitForAnimationEnd(myElement); //等待动画结束 //执行相应操作 }

4. 可以将该函数进行封装，以便在多个元素中使用 const waitForAnimations = (elems) => Promise.all(elems.map(waitForAnimationEnd));

例如，想要在两个元素都执行完动画后执行某个操作，可以使用以下代码：

async function doSomething() { const myElements = document.querySelectorAll('.myElement'); await waitForAnimations(myElements); //等待所有元素的动画结束 //执行相应操作 }