时间戳

首页 > 解决方案 > 删除具有可见性的类时 Div 闪烁

javascript - 删除具有可见性的类时 Div 闪烁

问题描述

我正在构建的通知系统有问题。

一切正常，直到我的 javascript 被触发以从通知 div 中删除显示类。当类被移除时，div 的起始位置会短暂闪烁。

这里的例子

JS显示通知：

function showNotification() {
   notificationRef.current.classList.add("nShow");

   setTimeout(() => {
     notificationRef.current.classList.remove("nShow");
   }, 4000);
}

通知 CSS 具有通用的定位和样式visibility: hidden以及top: 85px设置。

nShow（显示通知的类）：

.notification.nShow {
   visibility: visible;
   animation: fadeNotiIn 1s, fadeNotiOut 1s 3s;
 }
 @keyframes fadeNotiIn {
   from {
     top: 0;
     opacity: 0;
   }
   to {
     top: 85px;
     opacity: 1;
   }
 }

 @keyframes fadeNotiOut {
   from {
     top: 85px;
     opacity: 1;
    }
   to {
     top: 0;
     opacity: 0;
   }
 }

似乎在 opacity: 1 之后设置了可见性：隐藏，因此在删除 show 类时会出现闪烁。

谢谢

标签： javascriptcss

解决方案

这是一个示例。我不建议你在animation这里使用。在您计划的两个动画之间，您的元素会回到其默认状态，这让事情变得丑陋。

相反，我要做的是使用一个shorttransition来平滑两种状态之间的东西，并继续通过JS处理它。

const notification = document.querySelector('.notification');
function startNotification() {

  notification.classList.add("nShow");

  setTimeout(() => {
     notification.classList.remove("nShow");
  }, 3000);
}
.notification {
  opacity: 0;
  position: absolute;
  top: 0px;
  transition: all 1s;
}

.notification.nShow {
     top: 85px;
     opacity: 1;
 }
 
 .root {
  position: relative;
 }
<button onclick="startNotification()">Start notification</button>
<div class="root">
  <div class="notification">Hello</div>
</div>

正如在第一个版本中所说，我认为您不应该同时使用visibilityand opacity，并且由于您已经在使用 opacity，所以让我们完全使用它。

推荐阅读