Блог

У меня возникла проблема с системой уведомлений, которую я создаю.

Все работает нормально до конца, когда запускается мой javascript для удаления класса show из div уведомлений. Когда класс удаляется, происходит короткое мигание в начальную позицию div.

Пример здесь

JS для отображения уведомлений:

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

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

CSS уведомлений имеет общее позиционирование и стиль с visibility: hidden помощью и top: 85px set .

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 устанавливается после непрозрачности: 1, поэтому при удалении класса show возникает вспышка.

Спасибо

Вот пример. Я бы не советовал вам использовать animation здесь. Между двумя анимациями, которые вы планируете, ваш элемент возвращается к своему состоянию по умолчанию, и это делает вещи уродливыми.

Вместо этого я бы использовал короткое transition замыкание, чтобы немного сгладить разницу между двумя состояниями, и продолжал обрабатывать его через 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>  

Как было сказано в первой версии, я не думаю, что вам следует visibility использовать и opacity одновременно, и поскольку вы уже используете непрозрачность, давайте использовать ее полностью.