動畫結束後的回調不起作用

我想讓動畫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 ）。 –

動畫結束後的回調不起作用

回答

相關問題