Question

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

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

滑动事件也不再起作用（我之前用图像测试过）

jquery的：

$(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"});
        }
    });
});

小提琴： http://jsfiddle.net/9KwLW/

Answer 1

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

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

查看小提琴： 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>

Answer 2

我可能会为您提供更好的解决方案：

将stroke-dashoffset的默认1设置为.line，然后将from元素设置为dash动画，将stroke-dashoffset设置为动画开头的1000。

from {
        stroke-dashoffset: 1000;
    }
  to {
    stroke-dashoffset: 0;
  }

现在，如果您将animation属性移至.line，则会显示箭头，不会再触发动画。

$(".line").css("-webkit-animation", "none").css("-moz-animation", "none");

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

密钥事件后动画重复

2 个答案: