如何等待元素完全渲染后执行CSS过渡？

Question

我有一个按钮，有一个点击事件监听器，调用2个不同的函数。第一个函数通过添加一个类来淡出div，触发CSS过渡到不透明度为0，然后改变innerHTML，然后删除该类，不透明度淡回1。

第二个函数创建img元素，将其添加到div中，然后为img添加一个CSS比例过渡的类。所以它应该是这样的：点击-&gt；div淡出-&gt；div用新内容淡出-&gt；图片出现并变大。

为了让它正常工作，所有这些事件必须连续发生。我设法让它工作的唯一方法是使用setTimeouts，这真的不是最好的方法。我试过承诺、过渡期结束事件监听器、requestAnimationFrame，但似乎都不奏效。要么就是img不加载，要么就是加载的时候已经缩放了，过渡不在。有谁能帮我解决如何设置这些事件，使每个事件都在等待最后一个事件完成后才触发？谢谢你的帮助

伪代码。

function resetDiv() {
         const div = document.querySelector('#div');
         div.classList.add('cssFadeout');

            div.ontransitionend = () => {
                div.innerHTML = `${text literal HTML stored in a variable}`;
                div.classList.remove('fadeOut');
        }

function generateImg() {

            const newImg = document.createElement('img');
            newImg.src = 'img.png';
            newImg.id = 'newImg';
            div.appendChild(newImg);

            document.querySelector('#newImg').classList.add('cssScale')
}

button.addEventListener('click', (event) => {
    event.preventDefault();

    resetDiv();

    generateImg();

});

Answer 1

你可以使用jquery。

$(()=>{ callback })

或者vanilla js。

window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');

});

这里是DOMContentLoaded的mdn文档。https:/developer.mozilla.orgen-USdocsWebAPIWindowDOMContentLoaded_event。

Answer 2

'所以你需要的是一个页面的回流，这将强制 "重新渲染 "布局。

一种方法是用el.offsetWidth来实现。基本上，如果你把它放在这里，它会发生什么？

button.addEventListener('click', (event) => {
    event.preventDefault();

    resetDiv();

    el.offsetWidth

    generateImg();

});

当调用offsetWidth的时候 JavaScript会重新运行来检查元素的宽度 即使元素的宽度并没有改变 所以第一个函数运行后 第一个动画完成了

所以，声明一个全局变量，你在resetDiv中使用，也许是'div'的querySelector，在两个函数之间检查它的宽度。

让我知道这是否可行。

Answer 3

这里是基于你的伪代码的一个建议。

function resetDiv() {
    const div = document.querySelector('#div');
    div.classList.add('cssFadeout');

    div.ontransitionend = () => {
        div.innerHTML = `${text literal HTML stored in a variable}`;
        sky.classList.remove('fadeOut');
        // wait for the transition triggered above to end and then call the other function
        // also remove the call to generateImg() from the click-handler
        sky.ontransitionend = generateImg;
    };
}