运行 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 class。这是 CodePen.

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