Question

我想在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');
      });
    }
  });

});

Here is the jsfiddle

任何人都可以提供帮助吗？

Answer 1

您可以像这样使用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。

反转动画方向

1 个答案:

Updated Fiddle