Как предотвратить анимацию

Question

Как отключить функцию анимации при нажатии кнопки2?

$('.button1').click(function () {
    $('.wrapper').addClass('animation-in');
    $('.wrapper').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
       //do something
    });
});

$('.button2').click(function () {
    $('.wrapper').addClass('animation-out');
});

Answer 1

Вам нужно будет использовать функцию $.off. Хотя с встроенными обработчиками событий это может стать утомительным, если вы хотите быть избирательными в отношении того, какие обработчики следует удалить. Но самым простым случаем было бы не передавать обработчик событий. Таким образом, все обработчики для данного события будут удалены:

$('#on').click(function () {
  $('#foo')
    .addClass('move')
    .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function () {
      $('#foo').removeClass('move');
      console.log('done');
    })
  ;
});

$('#off').click(function () {
  $('#foo')
    .removeClass('move')
    // use `.off` and don't pass the handler
    .off('webkitAnimationEnd oanimationend msAnimationEnd animationend')  
  ;
});

#foo {
  width: 100px;
  height: 100px;
  background: black;
}

#foo.move {
  animation: foo-move 3s;
}

@keyframes foo-move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="foo"></div>

<button id="on">on</button>
<button id="off">off</button>