Отличный переход на удаление класса - PullRequest
Новая
       8

Отличный переход на удаление класса

0 голосов
/ 23 мая 2018

Ниже приведен код, который я пробовал.Что мне нужно, это когда класс удаляют через 5 секунд.Окно уведомлений не должно двигаться вверх.Просто исчезни в том же месте.

Это можно сделать, добавив еще один класс в setTimeout.Я хочу избежать этого. 

$('.notify').click(function() {
  $('.note').addClass('show');
  setTimeout(function() {
    $('.note').removeClass('show');
  }, 5000);
})
.note {
  top: 0%;
  width: 300px;
  position: fixed;
  background: #ccc;
  padding: 10px;
  left: 50%;
  height: 100px;
  margin: -50px 0 0 -150px;
  opacity: 0;
  transition: top 1s, opacity 1.5s;
}

.show {
  top: 50%;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="notify">click here</button>
<div class="note">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

Вы также можете сделать это чистый CSS с помощью селектора :target и простого animation: 

#note {
  width: 300px;
  position: fixed;
  top: 0;
  left: 50%;
  background: #ccc;
  padding: 10px;
  height: 100px;
  margin: -50px 0 0 -150px;
  opacity: 0;
  transition: all 1s;
}

#note:target {
  top: 50%;
  animation: fadeOut 6s forwards;
}

@keyframes fadeOut {
  16.67%, 83.33% {opacity: 1}
  100% {opacity: 0}
}
<a href="#note"><button class="notify">click here</button></a>
<div id="note">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>

Но единственным ограничением является то, что он может работать только один раз.

0 голосов
/ 23 мая 2018

Использование задержки в переходе: верхняя 1 с 1,5 с, непрозрачность 1,5 с; и добавление переход: верхняя 1 с, непрозрачность 1,5 с; в .show класс

$('.notify').click(function() {
  $('.note').addClass('show');
  setTimeout(function() {
    $('.note').removeClass('show');
  }, 5000);
})
.note {
  top: 0%;
  width: 300px;
  position: fixed;
  background: #ccc;
  padding: 10px;
  left: 50%;
  height: 100px;
  margin: -50px 0 0 -150px;
  opacity: 0;
  transition: top 1s 1.5s, opacity 1.5s;
}

.show {
  top: 50%;
  opacity: 1;
  transition: top 1s,opacity 1.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="notify">click here</button>
<div class="note">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
...