0

情况

  • 为 DIV1 单击 .rightnav.front。
  • 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

4

1 回答 1

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');
        //...

在Codepen上查看它的实际应用。要了解 CSS 动画，请查看.

于 2015-06-06T23:56:50.620 回答