亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

用 Javascript 屏蔽電話號碼字符串

用 Javascript 屏蔽電話號碼字符串

滄海一幻覺 2023-03-24 14:04:45
我正在構建的通知系統出現問題。一切正常,直到觸發我的 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 類時會出現閃光。
查看完整描述

1 回答

?
守候你守候我

TA貢獻1802條經驗 獲得超10個贊

這是一個示例。我不建議你在這里使用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



查看完整回答
反對 回復 2023-03-24
  • 1 回答
  • 0 關注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號