Question

我一直在尝试使用.toggleClass打开和关闭动画。不幸的是一切都很好，直到第一个动画完成。问题出在元素的剩余动画类中。我想在应用动画后完全重置元素的类，这样当我再次单击该按钮时，我不必再双击删除并再次运行动画。我已经尝试在每个动画完成后删除动画类但没有成功。以某种方式在切换之后移除类强制它在元素上，我无法找到解决方法。基本上，我想删除＆＃34;必要的＆＃34;双击以便我可以再次运行动画并在动画成功后删除在元素上切换的所有动画类。

这里是jsfiddle的链接。

//HTML
<div class="box"></div>
<button class="animationleft">left</button>
<button class="animationright">right</button>

//CSS
.box{
    width:100px;
    height:100px;
    margin-left:350px;
    background-color:black;
}
.slideRight {
    -webkit-animation: slideRight 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
.slideLeft {
    -webkit-animation: slideLeft 500ms cubic-bezier(0.19, 1, 0.22, 1);
}
@-webkit-keyframes slideRight{
  0%   { opacity: 1; }
  49%  { opacity: 0; margin-left:70%}
  50%  { opacity: 0; margin-left:-70%}
  100% { opacity: 1; }
}
@-webkit-keyframes slideLeft{
  0%   { opacity: 1; }
  49%  { opacity: 0; margin-left:-70%}
  50%  { opacity: 0; margin-left:70%}
  100% { opacity: 1; }
}

$('.animationleft').on('click', function(){
$('.box').toggleClass('slideLeft');
setTimeout(function(){
    $('.box').removeClass('.slideRight');
    $('.box').removeClass('.slideLeft');
},500);
});

$('.animationright').on('click', function(){
$('.box').toggleClass('slideRight');
setTimeout(function(){
    $('.box').removeClass('.slideRight');
    $('.box').removeClass('.slideLeft');
},500);
});

Answer 1

CSS动画的捕获是它没有提供重新启动动画的方法，除非动画类被移除然后重新应用（你在你的情况下做的但是成功有限）或动画元素本身被重新插入。

我认为后者可能会给你一个更清洁的解决方案。我们的想法是在动画完成后从页面中删除box元素并重新插入。

您可以使用的简单jQuery代码例程如下：

var el = $('#box'),  // I switched the 'box' class to an 'id'
    newEl = el.clone(true);   // make a clone of the element
el.before(newEl);   // place the clone
$("." + el.attr("class") + ":last").remove();   // remove the "old" box

这是一个工作演示（更新）：http://jsfiddle.net/H37CQ/3/

更新＃3：http://jsfiddle.net/H37CQ/8/

Answer 2

所以基本上你期望的是点击你的按钮一次，动画将播放，停止，当你再次点击时 - 它会再次播放。

这可以通过使用js代码捕获 animationend 事件来完成。这是jquery中的一个简单示例：

$("your-element-selector").addEventListener("animationend", function(){
  //do something here
}, false);

请注意，这也是一种捕获转换结束事件的方法，但是你必须记住过渡的所有前缀名称：

webkitTransitionEnd
mozTransitionEnd
oTransitionEnd
TransitionEnd

用于动画的jQuery toggleclass

2 个答案: