Javascript Css转换和设置超时

我在函数中将一个消息元素添加到页面中：

 const markup = `<div class="todolist__message todolist__message${status? "--ok":"--err"}">${msg}</div>`;

    elements.tdl.insertAdjacentHTML('beforeend', markup);

    if(fade) {
        const message = document.querySelector('.todolist__message');

        // Change the message opacity
        message.style.opacity = '0';

        // Remove the message element
        setTimeout(() => {
            document.querySelector('.todolist__message').parentElement.removeChild(message);
        }, 2000);
    }

export const deleteMessage = element => {
    if(element) {
        element.parentElement.removeChild(element);
    }
};

我不明白的是，为什么当我将消息不透明度更改为0时，转换似乎不起作用，元素立即消失

我必须重写代码，将样式更改放在setTimeout中，并为元素删除添加额外的setTimeout：

const markup = `
    <div class="todolist__message todolist__message${status? "--ok":"--err"}">${msg}</div>
`;

elements.tdl.insertAdjacentHTML('beforeend', markup);

if(fade) {

    setTimeout(() => {
        const message = document.querySelector('.todolist__message');

        // Change the message opacity
        message.style.opacity = '0';

        // Remove the message
        setTimeout(() => document.querySelector('.todolist__message').parentElement.removeChild(message), 2000);
    }, 2000);
}

const标记=`
${msg}
`;
elements.tdl.insertAdjacentHTML（'beforeend'，markup）；
如果（褪色）{
设置超时（（）=>{
const message=document.querySelector（'.todolist__message'）；
//更改消息不透明度
message.style.opacity='0'；
//删除该消息
setTimeout（（）=>document.querySelector（'.todolist__message'）.parentElement.removeChild（message），2000）；
}, 2000);
}

有人介意解释为什么第一个代码块会导致消息立即消失，而不是应用css转换吗

谢谢

**有关动画完成后删除元素的方法，请参见下面的答案

这是有效的：

var msg=“你好世界”；
常量标记=`
${msg}
`;
wrapper.innerHTML=标记；
btn.addEventListener（'click'，function（）{
const message=document.querySelector（'.todolist__message'）；
//更改消息不透明度
message.style.opacity='0'；
//删除该消息
setTimeout（（）=>document.querySelector（'.todolist__message'）.parentElement.removeChild（message），2000）；
});
.todolist\u消息{
过渡：不透明度1s；
}

删除
问题是您试图应用
不透明度：0
，同时应用转换。
到
过渡
工作；您需要首先添加transition类，然后在setTimeout中添加不透明度。
对于任何感兴趣的人，第二个超时和元素的删除应该替换为元素上的transitionend事件侦听器，该侦听器调用一个方法，在动画完成后删除元素，不要将设置超时与动画延迟+持续时间同步：

window.addEventListener(this.whichTransitionEvent(), function(e) {
    if(e.target.classList.contains('todolist__message')) {
        toDoListView.deleteMessage(e.target);
    }
}); 

删除功能：

 const markup = `<div class="todolist__message todolist__message${status? "--ok":"--err"}">${msg}</div>`;

    elements.tdl.insertAdjacentHTML('beforeend', markup);

    if(fade) {
        const message = document.querySelector('.todolist__message');

        // Change the message opacity
        message.style.opacity = '0';

        // Remove the message element
        setTimeout(() => {
            document.querySelector('.todolist__message').parentElement.removeChild(message);
        }, 2000);
    }

export const deleteMessage = element => {
    if(element) {
        element.parentElement.removeChild(element);
    }
};

和David Walsh检查前缀的函数：

whichTransitionEvent() {
    let t;
    const el = document.createElement('fake-element');
    const transitions = {
        'transition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'MozTransition': 'transitionend',
        'WebkitTransition': 'webkitTransitionEnd'
    }

    for(t in transitions) {
        if(el.style[t] !== undefined)
            return transitions[t];
    }
}

我认为我做得很对——这两种方法似乎都有效
 尝试添加类而不是更新样式。是的，干杯，这可能比2次超时要好，但仍然对上面的代码为什么不能像我预期的那样工作感兴趣？您的代码可以工作，请参阅我的答案。PS：你把这个
转换
规则放在哪里了，你能用选择器显示你的css吗？是的，这是第一个不起作用的代码示例，没有两个设置超时：）@NickW我想问题是你在添加和立即删除，当你需要运行setTimeout（0）时，JS中有一些东西与css相关因此，代码在下一个事件循环中运行，因为css更新发生在JS事件循环中。嗯，我的意思是，很高兴知道我没有错过任何明显的东西，你可能是对的-但我正在努力了解你的代码到底有什么不同，我会玩一玩， thanks@NickW在我的代码中，删除是在单击事件中，因此它与代码中的时间不同。如果将setTimeout（0）添加到代码中，它应该可以工作，因为事件循环。看这个视频，你的意思是因为我几乎在应用不透明度的同时创建类本身吗？在不透明度设置为零之前，技术上已经应用了转换，因为它在元素的css中（连同不透明度：1），这是相同的事情。创建新元素或添加具有
transition
属性的“class”。