javascript - 使用延迟 Javascript 删除 DIV

Question

这是我的第一个问题，如果我没有应用正确的礼仪，请原谅我。

我有一个 javascript 函数，可以隐藏带有淡入淡出的 div。

function fadeOut(cloudChatHide)
{
    "use strict";
    cloudChatHide.onclick = function()
        { 
            if(cloudChatHide.className)
                {
                cloudChatHide.className = '';
                } 
            else 
                {               
                cloudChatHide.className = 'fadeout';
                RemoveCloudChat();
                }
        };
}

但是此代码不会删除 DIV，即 RemoveCloudChat 函数。看起来像这样:-

function RemoveCloudChat()
{
    "use strict";
    cloudChatHide.remove();
    cloudChatHide.className ='fadeout';
}

我真正想做的是在几秒钟后自动淡化 div，然后删除它。

我需要从窗口中删除 div 的原因是它是一个覆盖的 div，我需要访问“cloudChatHide”div 下面的内容。

任何帮助/指导都将不胜感激，因为我不是最伟大的 Javascript 开发人员。

谢谢。

Answer 1

您可以使用 CSS 过渡平滑地淡出元素并监听 transitionend 事件以在过渡完成时移除元素。

查看此 jsFiddle .

过渡是用这个 CSS 定义的:

div {
  opacity: 1;
  transition: opacity 1s;
}

div.fade-out {
  opacity: 0;
}

一旦将淡出类添加到 div，它就会在 1 秒内平滑地降低其不透明度。这可以使用以下 JavaScript 完成，不需要 jQuery:

function fadeOutAndRemove(element) {
    element.classList.add('fade-out');
    element.addEventListener('transitionend', function () {
      element.parentNode.removeChild(element);
    });
}

如果你想在固定延迟后自动开始淡出过渡，你可以在超时后调用 fadeOutAndRemove

window.setTimeout(fadeOutAndRemove.bind(this, elementToHide), 3000)

或为过渡添加延迟

transition: opacity 1s 3s;

并用淡出类初始化元素

<div class="fade-out"></div>