动画没有用jQuery TransitionEnd事件完成

Question

情况

• 单击.rightnav.front以获取DIV1。
• DIV1向右移动，透明度降低。
• DIV1向左移动，在完成时不透明为0。
• DIV1让类.hidden和.offset来隐藏它并将其移出屏幕，所以它不再可以点击了。
• 下一个DIV (为测试目的使用id 2的DIV)删除了它的隐藏类和偏移类，并且是下一个单击事件的目标。

问题

DIV向右移动，但在隐藏之前不会向左移动(再次移动)。试一试见底部的Codepen。

我只是在这里张贴JavaScript代码。您可以在代码页中找到CSS和HTML。

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

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

Answer 1

看看这个解决方案，也许(肯定)它并不理想，但应该能像预期的那样工作。正如我在评论中提到的，我已经将动画从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');
        //...

在科德芬上看到它的动作。了解CSS动画瞧一瞧。