animate.css: повторяющиеся анимации

Я использую animate.css для создания анимации. Если возникает ошибка, элемент должен отскакивать:animate.css: повторяющиеся анимации

$target.addClass('animated bounce');

Это хорошо работает. Но если пользователь делает то же самое, не будет второй анимации, так как классы уже добавлены.

Поэтому я стараюсь, чтобы удалить классы после анимации, как это:

$target.addClass('animated bounce'); 
setTimeout(function(){ 
    $target.removeClass('animated bounce'); 
}, 1000);

Мой вопрос, если это то, как это должно быть сделано (я не знаю, как долго анимация точно), или есть другое решение для повторения анимации?

источник

2015-12-07 user3142695

Не уверен, что следовать за вами 100% , но если вы используете animate.css, чтобы повторить анимацию, вы можете добавить следующий CSS для повторения: #yourElement { -vendor-animation-iteration-count: infin; (Используйте номер здесь, если вы хотите установить specif количество повторов анимации) } Или, вы можете просто установить его, как это, если вы хотите бесконечные повторы:

Где -vendor- является префиксы – Korgrue

Вы должны сделать это:

$('#target').removeClass().addClass('bounce animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
    $(this).removeClass(); 
});

$('#target') в этом случае идентификатор вашего элемента, изменить это для ваших нужд.

источник

2015-12-07 20:21:27 Franco

«один» должен быть «включен»? И 'oanimationend' -> 'onanimationend'? – user3142695

Нет, вы просто используете его так же, как в своем событии с ошибкой. Этот маленький скрипт будет запускаться каждый раз при возникновении ошибки. Это также рекомендуется создателю animate.css. Вам нужно только изменить целевой идентификатор. – Franco

Хорошо, но мне нужно использовать 'one()', поскольку классы всегда будут удалены, прежде чем они будут добавлены ...? – user3142695

Run на мыши входа и выходе:

$target.stop().toggleClass('animated bounce');

класс анимации добавляется & удалена основанным на наведении мышей (вход/выход) действия. Класс не останется активным после выхода из объекта.

.stop() останавливает анимацию от повторения несколько раз, если кто-то парит/выходит много раз до завершения анимации.

источник

2015-12-07 20:34:05 Jay

Не могли бы вы объяснить, что исправить? – Phani

@Phani класс анимации добавляется и удаляется на основе действия мыши (ввод/выключение). Класс не останется активным после выхода из объекта. – Jay

Если вы можете добавить то же самое в ответ, это будет намного понятнее. Благодарю. – Phani

есть более короткое решение, вы должны «обновить» анимированного элемент каждый раз

function refreshElement(id){ 
    var el = $(id); 
    el.before(el.clone(true)).remove(); 
}

и таким образом, вы можете запустить анимацию на этом элементе снова

источник

2015-12-22 11:25:29

ответ

Смежные вопросы