gpt4 book ai didi

javascript - 在 SlideUp 动画结束之前再次触发函数时,动画会出现故障

转载 作者:行者123 更新时间:2023-12-02 23:58:50 26 4
gpt4 key购买 nike

我使用以下脚本(以及外部 animate.css),当我想显示特定通知时,我会调用该脚本。这个想法很简单;触发时,动画 - (向下滑动)通知框以及更改的通知消息。时间到了,再次制作动画(向上滑出)。一切工作正常,除了当我在上一个调用动画结束时重新触发通知功能时(在超时和向上滑动动画开始之间 - 请参阅代码中的注释)。

// notification
var timer = '';
var notif = $('#notif');
var notif_txt = $('#notif #notif_txt');
var notif_orig = '#notif';

function err_notif(text = 'Prišlo je do napake!') {

clearTimeout(timer);
notif[0].style.display = 'none';

notif_txt.text(text);
notif[0].style.display = 'inline-block';
anim(notif_orig, 'slideInDown', function() {

timer = setTimeout(function(){

// if user re-triggers the notif() function in time between mark 1 and 2, it glitches out the notification system
// mark 1

anim(notif_orig, 'slideOutUp', function(){

// mark 2
notif[0].style.display = 'none';


});

}, 1500);
});
}

其他代码资源:

Animate.css 用于 CSS 动画 https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

anim() 函数(来自 animate.css 的 github 页面)

function anim(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)

function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)

if (typeof callback === 'function') callback()
}

node.addEventListener('animationend', handleAnimationEnd)
}

最佳答案

如果您想阻止并发动画,您可以检查该元素是否已经具有animated类。

if(document.querySelector(notif_orig).classList.contains("animated")){
console.log("Concurrent animation prevented.")
}else{
anim(notif_orig, 'slideInDown', function() {
//...
}

关于javascript - 在 SlideUp 动画结束之前再次触发函数时,动画会出现故障,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55261901/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com