尝试使用animate.js框架播放在正向和反向播放之间切换的动画。
HTML
<button class="btn">PLAY</button>
<div class="square"></div>
JS
/** animation */
let animeSquare = anime({
targets: '.square',
translateX: '100px',
duration: 500,
autoplay: false,
});
/** button */
$('.btn').click(function() {
if ($(this).hasClass('is-active')) {
animeSquare.reverse();
$(this).removeClass('is-active');
} else {
animeSquare.play();
$(this).addClass('is-active');
}
});
问题是我必须点击两次按钮才能播放动画,为什么呢?
Codepen: https://codepen.io/aitormendez/pen/ymyzoq