Question

我希望点击动画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：

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上看到它：http://codepen.io/tomekbuszewski/pen/XmrjRR

我该怎么办？

Answer 1

不是回调不起作用，而是addClass函数不能与SVG一起使用。改为使用attr，您将在检查器中看到正在添加该类：

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

另一个问题是$('.completed').on('click', ...)仅为在调用它时出现的元素注册事件处理程序，而没有因为它永远不会被调用。动画完成后你必须这样做。

这是fixed codepen。

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

1 个答案: