动画结束后的回调不起作用

我想让动画SVG在点击后重新启动，但只有在动画完成后才能重新启动。动画结束后的回调不起作用

我当前的代码如下：

JS：

$('.svg-icon').on('click', function() { 
    $(this).removeClass('completed'); 
    $('.path-01, .path-02, .path-03').fadeOut(0, function() { $(this).fadeIn(); }) 
}); 

$('.path-01').one('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() { $('.svg-icon').addClass('completed'); });

SCSS：http://codepen.io/tomekbuszewski/pen/XmrjRR

我能做些什么：

svg { 
    max-width: 400px; 
    display: block; 
} 

.path-01, .path-02, .path-03 { 
    stroke-width: -1px; 
    stroke-dasharray: 100; 
    stroke-dashoffset: 100; 
} 

.animate { 
    @include animation(stroke-animation 5s ease-in forwards); 
} 

@include keyframes(stroke-animation) { 
    to { 
     stroke-dashoffset: 0; 
    } 
}

您可以在codepen看到了吗？

来源

2015-08-27 Tomek Buszewski

这不是回调不起作用，但它是addClass函数不能与SVG一起使用。使用attr代替，你会在检查正在添加类看：

$('.path-01').one('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() { 
    $('.svg-icon').attr('class', 'svg-icon completed'); 
});

另一个问题是，$('.completed').on('click', ...)仅适用于存在于一时的被调用时，它再没有元素注册事件处理程序所以它永远不会被调用。动画完成后您必须执行此操作。

这是fixed codepen。

来源

2015-08-27 10:27:46

谢谢，Łukasz。我用'attr（'class'，'svg-icon completed'）'，因为你的解决方案不起作用。另外，''click'我使用'$（document）.on（'click'，'.completed'，function（）{'，你可以在小提琴中看到 –

@TomekBuszewski当然，我忘了'class' ！我会更新我的答案 –

@TomekBuszewski和'$（document）.on（'click'，'.completed'，...）'比在每个动画结束后注册回调更简单的解决方案（如在我的codepen ）。 –

动画结束后的回调不起作用

回答

相关问题