用 Javascript 屏蔽电话号码字符串

Question

我正在构建的通知系统出现问题。一切正常，直到触发我的 javascript 以从通知 div 中删除显示类。当类被移除时，div 的起始位置会出现短暂的闪烁。这里的例子JS显示通知：function showNotification() {   notificationRef.current.classList.add("nShow");   setTimeout(() => {     notificationRef.current.classList.remove("nShow");   }, 4000);}Notification 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;   } }似乎 visibility: hidden 是在 opacity: 1 之后设置的，所以在删除 show 类时会出现闪光。

Answer 1

这是一个示例。我不建议你在这里使用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