在slideUp动画结束之前再次触发功能时,动画会出现故障

时间:2019-03-20 13:30:08

标签: javascript jquery css-animations animate.css

我使用以下脚本(以及外部animate.css)在要显示特定通知时调用。这个想法很简单;触发后,为通知框设置动画(向下滑动)以及更改的通知消息。时间到时,再次进行动画处理(向上滑动)。一切正常,除了我在上次调用动画时重新触发通知功能时(在超时和向上滑动动画之间-请参见代码中的注释)。

package scriptfun;

import java.lang.annotation.Annotation;
import java.lang.reflect.Method;
import javax.script.*;

public class Main {

    private static final String SCRIPT
            = "@scriptfun.MyAnnotation()\n"
            + "fun unknownFun(): Int {\n"
            + "   return 0\n"
            + "}";

    public static void main(String[] args) throws Exception {
        boolean evalScript = false;
        ScriptEngineManager factory = new ScriptEngineManager();
        ScriptEngine engine = factory.getEngineByExtension("kts");
        if (evalScript) {
            // This works, but the script must be wrapped and evaluated and the code is specific to Kotlin
            String script = "val obj = object {" + SCRIPT + "}\n"
                    + "obj";
            Object obj = engine.eval(script);
            Method method = obj.getClass().getDeclaredMethods()[0];
            Annotation annotation = method.getAnnotations()[0];
            System.out.println("obj = " + obj); // obj = Line_1$obj$1@7fa255ee
            System.out.println("method = " + method); // method = public final int Line_1$obj$1.unknownFun()
            System.out.println("annotation = " + annotation); // annotation = @scriptfun.MyAnnotation()
        } else {
            if (engine instanceof Compilable) {
                Compilable compilable = (Compilable) engine;
                CompiledScript compiledScript = compilable.compile(SCRIPT);
                // HELP How do I get the Method and Annotation here?
            }
        }
    }
}

其他代码资源:

Animate.css用于CSS动画 https://raw.githubusercontent.com/daneden/animate.css/master/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的github页面)

anim()

1 个答案:

答案 0 :(得分:1)

如果要防止同时播放动画,可以检查元素是否已经具有animated类。

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