javascript - 动画在 keyup 事件后重复

Question

我制作了一个 svg、css 动画并添加了一些 jquery 键盘事件。每当我按下按键时，动画就会一次又一次地开始。

有没有办法只在页面加载后播放动画？

滑动事件也不再有效(我之前用图像测试过它)

j查询:

$(document).ready(function(){
    $(document).keyup(function(e) {
        if (e.keyCode === 40) {
            $(".arrow_down").animate({
                top:"+=20px",
                opacity:"0"
            });
            $(".button").animate({
                opacity:"1"
            });
        }
          if (e.keyCode === 37) {     
            $(".arrow_down").effect("bounce",{times:3}, 500 );
        }
         if (e.keyCode === 39) {     
            $(".arrow_down").effect("bounce",{times:3}, 500 );
        }
         if (e.keyCode === 38) {     
            $(".arrow_down").effect("bounce",{times:3}, 500 );
        }
    });
    $(".arrow_down").swipe({
        swipeDown:function(){
            $(".arrow_down svg").animate({top:"+=5%", opacity:"0"});
            $(".button").animate({opacity:"1"});
        }
    });
});

fiddle : http://jsfiddle.net/9KwLW/

Answer 1

好的；我想到了。这可能不是最优雅的解决方案，但我找不到更好的解决方案。

所以我将带有动画的类从“line”更改为“animline”。然后在 700 毫秒后，我搜索所有带有类“line”的项目并删除它们的类“animline”——我不能为此使用 jQuery，因为 jQuery 不能在没有任何插件的情况下搜索 SVG 中的元素，所以为什么不使用一些纯 JavaScript。

参见 fiddle : http://jsfiddle.net/9KwLW/2/

JS:

window.setTimeout(function(){
       lines = document.getElementsByClassName('line');
        for (i=0;i<lines.length;i++) {
             lines[i].classList.remove("animline");   
        }
    },700);

CSS:

.animline {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
 -moz-animation: dash 5s linear forwards;
 -webkit-animation: dash 5s linear forwards;
 -moz-animation-timing-function: ease;
 -webkit-animation-timing-function: ease;
}

HTML:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="7px" height="193px" viewBox="0 0 7 193" enable-background="new 0 0 7 193" xml:space="preserve"><line class="line animline" fill="none" stroke="#000000" stroke-width="7" stroke-miterlimit="10" x1="3.5" y1="0" x2="3.5" y2="193"/>
</svg>

<svg class="arrow_head" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="63.25px" height="36.75px" viewBox="0 0 63.25 36.75" enable-background="new 0 0 63.25 36.75" xml:space="preserve"><polyline class="line animline" fill="none" stroke="#000000" stroke-width="7" stroke-miterlimit="10" points="60.5,2.686 31.688,30.509 2.875,2.686 "/></svg>