反转动画方向

141

阿塔诺

我想在 HTML/CSS/jQuery 中反转动画。我试图用 flexbox 做到这一点，但我不能。

现在它从右到左动画，但我想从左到右做。内容 1 在开始时也应该是可见的，然后在动画完成后内容 2 应该是可见的。

HTML：

<div id="slides">
  <div class="cont1 activeTab">
    Content 1
  </div>
  <div class="cont2">
    Content 2
  </div>
</div>
<div>
  <button>xxx</button>
</div>

CSS：

#slides{  
  position:relative;
  overflow:hidden;
  margin:0 auto;
  background:#cf5;
  width:400px;
  height:200px;
  white-space:nowrap;
}
#slides div{
  position:relative;
  display:inline-block;
  margin-right:-4px;
  white-space:normal;
  vertical-align:top;
  *display:inline;
  background:#eee;
  width:400px;
  height:200px;
}
#slides .cont1 {
  background: red;
}
#slides .cont2 {
  background: blue;
}

jQuery：

$(function(){

  var slideW = $('#slides').width();
  $('button').click(function( e ){
    var el = $(this),
        state = el.data('animState');
    if(state == 'busy') {
       return false;
    } 
    el.data('animState', 'busy');
    if ($('.cont1').hasClass('activeTab')) {
      $('#slides').animate({scrollLeft: slideW }, 600, function(){
        $('.cont1').removeClass('activeTab');
        $('.cont2').addClass('activeTab');
        el.data('animState', 'complete'); 
      });
    } else {
      $('#slides').animate({scrollLeft: 0 }, 600, function(){
        $('.cont1').addClass('activeTab');
        $('.cont2').removeClass('activeTab');
        el.data('animState', 'complete');
      });
    }
  });

});

这是jsfiddle

任何人都可以帮忙吗？

丹尼普

你可以这样使用flexbox：

#slides{  
  position:relative;
  overflow:hidden;
  margin:0 auto;
  background:#cf5;
  width:400px;
  height:200px;
  display:flex;
  flex-direction:row-reverse;
}
#slides div{
  flex:0 0 100%;
  position:relative;
  background:#eee;
  width:400px;
  height:200px;
}

然后在您的 JS 上将scrollLeft要动画的值先更改为，然后更改0为slideW。