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功能。虽然使用内联事件处理程序，如果您想要选择应删除哪些处理程序，这可能会变得很麻烦。但最简单的情况是不传递事件处理程序。这样，将删除给定事件的所有处理程序：

＆＃13;

$('#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')  
  ;
});

＆＃13;

#foo {
  width: 100px;
  height: 100px;
  background: black;
}

#foo.move {
  animation: foo-move 3s;
}

@keyframes foo-move {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

＆＃13;

<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>

＆＃13;

如何防止动画和功能

1 个答案: