依次运行css动画和WebkitAnimationEnded

Question

我正在尝试按顺序对几个 SVG 线条元素进行动画处理，我在这里遵循@Gaby 方法A non-nested animation sequence in jQuery? 并使用了 jQuery 队列。但是我的 WebkitAnimationEnd 永远不会被解雇。也许它不适用于 SVG 元素，但文档中没有提到：

    var q = $({});

    function pushQueue(theQueue, selector, animationprops) {
        theQueue.queue(function(next) {



            $('#' + selector).one("webkitAnimationEnd oanimationend msAnimationEnd animationend",  function(){
                console.log('Animation ended, calling next..'); 
                next(); 
            } );


            s.select('#' + selector)
                .clone()
                .addClass('path')
                .attr({
                    stroke: "#FFE840",
                    filter: 'none'
                });




        });
    }

我在下面添加了一个CodePen，你可以点击p103管道正下方的阀门看看效果。

http://codepen.io/yehiasalam/pen/RPbgPz

Answer 1

这是您需要更改的内容。之前事情不工作的原因是您首先cloneing 对象，然后然后添加path 类。这是CodePen。

s.select('#' + selector)
     .addClass('path')
     .clone()
     .attr({
        stroke: "#FFE840",
        filter: 'none'
      });