Как сделать так, чтобы этот элемент не скрывался и не появлялся снова? - PullRequest
Новая
       47

Как сделать так, чтобы этот элемент не скрывался и не появлялся снова?

1 голос
/ 05 мая 2020

У меня проблема с приведенным ниже кодом. Предполагается, что он будет показывать тост при загрузке страницы. Через 3500 миллисекунд он должен исчезнуть. Он делает это, затем появляется снова, пропускает переход постепенного исчезновения и исчезает. Как заставить его исчезнуть, подождать 3500 миллисекунд, а затем исчезнуть? 

function showDonate() {
  var x = document.getElementById("snackbar");
  x.className = "show";
  setTimeout(function() {
    x.className = x.className.replace("show", "");
  }, 3300);
}

showDonate()
#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: 130px;
  background-color: #212529;
  color: #fff;
  text-align: right;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z -index: 999;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
<div id="snackbar"> <b>Hey There!</b> Give us your money! <a href="#">Link</a></div>

1 Ответ

1 голос
/ 05 мая 2020

Добавьте forwards к анимации, она сохранит значения стиля из последнего ключевого кадра, когда анимация закончится, дополнительная информация . Я также внес некоторые изменения в изменение класса.

Рабочий пример: 

function showDonate() {
  var x = document.getElementById("snackbar");
  x.classList.add("show");
  setTimeout(function() {
    x.classList.remove("show");
  }, 3300);
}

showDonate()
#snackbar {
  opacity: 0;
  min-width: 250px;
  // margin-left: 130px;
  background-color: #212529;
  color: #fff;
  text-align: right;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z -index: 999;
  // left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  opacity: 1;
  animation: fadein 0.5s, fadeout 0.5s 2.5s forwards;
}

@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 30px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    bottom: 30px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}
<div id="snackbar"> <b>Hey There!</b> Give us your money! <a href="#">Link</a></div>

Обновить

Чтобы изменить длину анимации:

  1. Измените видимую длину в CSS (число перед forwards)
  2. Измените длину setTimeout в JS (CSS время анимации входа / выхода + число перед forwards)

Например, если вы хотите, чтобы он отображался в течение 5 секунд:

  • CSS: animation: fadein 0.5s, fadeout 0.5s 5s forwards;
  • JS: }, 5000+500+500);
...