Здравствуйте. Есть вот такая анимация на 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 сделать, но ничего не вышло(((
