【问题标题】：Animation doesn't complete with jQuery TransitionEnd event动画未通过 jQuery TransitionEnd 事件完成
【发布时间】：2017-09-14 06:39:39
【问题描述】：

情况

.rightnav.front 为 DIV1 点击。
DIV1 向右移动，不透明度降低
DIV1 向左移动，完成时不透明度为 0
DIV1 获取类 .hidden 和 .offset 以将其隐藏并将其移出屏幕，因此不再可点击..
下一个 DIV（用于测试目的的 id 为 2 的 DIV）已删除它的隐藏和偏移类，并且是下一个点击事件的目标。

问题

DIV 向右移动，但在隐藏之前不会向左移动（再次返回）。请参阅底部的 Codepen 进行试用。

我只是在这里发布 JavaScript 代码。CSS 和 HTML 你可以在 codepen 中找到。

这里是 jQuery 代码

$(document.body).on('click','.rightnav.front', function () {
      var x = $(this).parent().parent();
      x.addClass('moveright')
      .one('transitionend', function() {
        x.removeClass('moveright')
      })
      .one('transitionend', function(){
        x.addClass('moveleft');
      })
      .one('transitionend', function() {
        x.addClass('hidden').addClass('offset');
        $('.rightnav.front').removeClass('front');
        var nextId = Number(x.attr('id')) + 1;
        var nextWidget = $('#' + nextId);
        nextWidget.removeClass('hidden');
        nextWidget.children().find('.rightnav').addClass('front');
      }) 
    });

代码笔

这里是实时测试的 CodePen.IO 链接：http://codepen.io/nygter/pen/QbpegM

【问题讨论】：

这已经不是解决方案，而是一个简单的建议，您不必x.addClass('moveleft'); 来动画向后移动。它甚至不会那样工作。看看这个精简版codepen.io/anon/pen/LVyNGG
感谢 Garrett 的评论和提示 :) 如果我删除最后一个 .one，动画会正常工作，只是当我需要获取使第二个 div 出现的逻辑时，它会得到搞砸了:)
@TerjeNygård 为什么不直接让 moveRight、moveLeft 类来回动画并始终转换不透明度？这是 CSS 动画的绝佳候选者！
@TerjeNygård 另一个简短提示：您可以像 addClass('hidden offset') 一样在一个操作中添加两个类 :)
我想帮忙，但实际上我没有足够的时间来解决这个问题。请阅读 CSS 中的动画并制作动画 left -> right + opacity -> left 然后制作您最喜欢的 .one('transitionend', function(){ ... }); :) 并通过添加 Class 或 smth 使其消失。 GN，我希望它足以解决这个问题。 developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

标签： javascript jquery css css-transitions transitionend

【解决方案1】：

看看这个解决方案，也许（肯定）它并不理想，但应该可以按预期工作。正如我在评论中提到的，我已将 animation 从 jQuery 移至 @keyframes。

魔法来自：

.widget.moveright{
  left:450px;
  margin-left:-100px;
  opacity:0.5;
}

和

x.addClass('moveright')
      .one('transitionend', function() {
        x.removeClass('moveright')
      })
      .one('transitionend', function(){
        x.addClass('moveleft');
      }) //...

转化为：

@keyframes moveright{
  50% {
    left:450px;
    margin-left:-100px;
    opacity:0.5;
  }
  100% {
    opacity: 0;
  }  
}

.widget.moveright{
  animation: moveright 1s ease;
  -webkit-animation: moveright 1s ease;
}

和

x.addClass('moveright')
      .one('animationend', function() {
        $(this)
          .removeClass('moveright')
          .addClass('hidden offset');
        //...

在Codepen 上查看它的实际应用。了解 CSS 动画take a look.

【讨论】：

非常感谢@Garrett 的这个解决方案！.. 这正是我一直在寻找的，从我现在看到的......我绝对喜欢关键帧！