jQuery — скажите, когда анимация CSS достигает 100%

Есть ли способ определить, когда анимация достигает 100% своей анимации с помощью jQuery?

{0%{-xxx-transform:translate(0,0);}
100%{-xxx-transform:translate(-500px, 300px); opacity: 0.1;}

jquery css css-animations css-transforms
person Philip    schedule 04.03.2012    source источник
comment
Возможно, вы захотите увидеть stackoverflow. com/questions/7134584/ это может вам помочь.   -  person Thomas Clayson    schedule 05.03.2012

Ответы (3)


arrow_upward
1
arrow_downward

Это правильный ответ.

$(elem).bind('webkitAnimationEnd', function (event) { // function });

Как повторно запустить CSS-анимацию WebKit через JavaScript?

person Philip    schedule 05.03.2012

arrow_upward
0
arrow_downward

Вы можете использовать событие transitionend.

$('#elem').bind('transitionend', function()
{
    alert('finished animating');
});
person MacMac    schedule 04.03.2012
comment
Спасибо за ваш ответ, но на самом деле переход был неправильным путем. Но «webkitAnimationEnd» или «animationEnd». - person Philip; 05.03.2012

arrow_upward
0
arrow_downward

Просто для ясности, вот список всех свойств 'animationEnd', специфичных для браузера:

$('#foo').bind('animationEnd oAnimationEnd msAnimationEnd mozAnimationEnd webkitAnimationEnd', function(event){
    // Do stuff once the CSS animation has finished.
});
person Labu    schedule 23.10.2012