用 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() {&nbsp; notification.classList.add("nShow");&nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp;notification.classList.remove("nShow");&nbsp; }, 3000);}.notification {&nbsp; opacity: 0;&nbsp; position: absolute;&nbsp; top: 0px;&nbsp; transition: all 1s;}.notification.nShow {&nbsp; &nbsp; &nbsp;top: 85px;&nbsp; &nbsp; &nbsp;opacity: 1;&nbsp;}&nbsp;&nbsp;.root {&nbsp; position: relative;&nbsp;}<button onclick="startNotification()">Start notification</button><div class="root">&nbsp; <div class="notification">Hello</div></div>正如在第一个版本中所说，我认为您不应该同时使用visibilityand ，并且由于您已经在使用不透明度，所以让我们完全使用它。opacity