Форум

drkrol · #1 (**permalink**) 24.05.2020, 17:37

Здравствуйте. Есть вот такая анимация на gsap. Я пытаюсь повторить это на чистом js...
https://jsfiddle.net/0gtq67ka/

Не выходит.

var playShowMsg;
function showMsg() {
clearTimeout(playShowMsg);
document.querySelector(".msg").classList.remove("showmsg")
playShowMsg = setTimeout(function(){document.querySelector(".msg").classList.add("showmsg");}, 0);
playShowMsg = setTimeout(function(){document.querySelector(".msg").classList.remove("showmsg")}, 2000);
}

.showmsg {
	visibility: visible !important;
	opacity: 1 !important;
	transform: translateY(-5vh);
}

смысл такой:
кликаешь, появляется блок, через 2 секунды исчезает.
Если кликаешь ещё раз, то анимация должна сразу же повториться. Попробуйте в jsfiddle несколько раз быстро подряд прощёлкать. Оно под каждое нажатие проанимируется, а в моей попытке сделать также оно так не анимируется...

У меня какой-то сбой с таймером получается, потому что если 2 раза подряд нажать, то анимация не проиграется. Я попытался через clearTimeout сделать, но ничего не вышло(((

Error · #2 (**permalink**) 24.05.2020, 21:40

Я тут кое-что написал. Извините, если это недостаточно осмысленно или избыточно — надеюсь, меня поправят.

<!DOCTYPE html>
<html>
<head>
  <style>
     .block {
      transition-property:height;
      width: 100%;
      background-color: #aaff00;
      overflow-y: hidden;
      height: 0;
      position:fixed;
      bottom:0;
      transition-duration:0.5s
   }
   .visible {
     height: 100px;
   }
 </style>
</head>
<body>
 <button onclick='show()'>click me!</button>
 <div class='block'>Сообщение успешно отправлено.</div>
 <script>
  const block = document.querySelector(".block"); 
  let visibility = false;
  function show() {
    if (!visibility) {
      block.classList.add("visible");
      //visibility = true;
      const command = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 2000);
      });
      command.then(function () {
        block.classList.remove("visible");
        visibility = false;
      });
    }
  }
</script>
</body>
</html>

Если раскомментировать 29 строчку, то блок временно перестанет реагировать на нажатия кнопки...

рони · #3 (**permalink**) 24.05.2020, 22:11

Error,

[html run]
... здесь можно вставить полноценный пример
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Форум

Справочник

Discord чат

Курсы javascript