如何在按下按钮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');
});
最佳答案
您需要使用$.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>
关于javascript - 如何防止动画结束功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50214006/