Question

我正在尝试使用css3 translate向左或向右滑动菜单和容器。但是在单击切换时，菜单范围似乎滑动得非常快，容器似乎缓慢向左滑动。我是否正确编写了css样式？

CSS

  .animate-left,.animate-left-container {
   transition: all .6s ease-out 0.2s;
  }
  .animate-left-container {
   -webkit-transform: translateX(0px);
  }
 .animate-right,.animate-right-container {
   transition: all .6s ease-in 0.2s;
  }
  .animate-right-container {
   -webkit-transform: translateX(0px);
  }
 .animate-left {
  -webkit-transform: translateX(-45px);
  margin-left: -45px;
 }

 .animate-right{
   -webkit-transform: translateX(0);
   margin-left: 0px;
 }

JS

var container = $(".app-data-container").children();

$('.nav-toggle-button-container').on('click',function(e){

var x = $(container[0]), y= $(container[1]);


if(x.hasClass('animate-left') && y.hasClass('animate-left-container')) {
    x.removeClass('animate-left').addClass('animate-right');
    y.removeClass('animate-left-container').addClass('animate-right-container');
}else if(x.hasClass('animate-right')){
    x.removeClass('animate-right').addClass('animate-left');
    y.removeClass('animate-right-container').addClass('animate-left-container');
}else{
    x.addClass('animate-left');
    y.addClass('animate-left-container');
}
});

演示：http://jsfiddle.net/2b9e8bq9/

Answer 1

花了一点点，但我创建了一个我希望有帮助的例子，也许可以简化整个代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta charset="UTF-8">
    <style type="text/css">
      .rate-100pxs, .rate-200pxs {
        -webkit-transition: all 1s ease 0;
        -moz-transition:    all 1s ease 0;
        -o-transition:      all 1s ease 0;
        transition:         all 1s ease 0;
      }
      #cell-1, #cell-2 {
        display:inline-block;
        position:relative;
        width:200px;
      }
      h1 {
        white-space:pre;
        font-size:20px;
      }
      .animation-box {
        position:relative;
        background:#eee;
      }
      .animation-box .rate-200pxs {
        left:200px;
      }
      .animation-box:hover .rate-200pxs {
        left:0px;
      }
      .animation-box .rate-100pxs {
        left:200px;
      }
      .animation-box:hover .rate-100pxs {
        left:100px;
      }
    </style>
  </head>
  <body>
    <h1>Distance: 200px    Duration: 1s    Rate:200 px/s</h1>
    <div class="animation-box">
      <div id="cell-1" class="rate-200pxs">Cell 1</div><div id="cell-2" class="rate-200pxs">Cell 2</div>
    </div>
    <h1>Distance: 100px/200px    Duration: 1s    Rate:100 px/s & 200 px/s</h1>
    <div class="animation-box">
      <div id="cell-1" class="rate-100pxs">Cell 1</div><div id="cell-2" class="rate-200pxs">Cell 2</div>
    </div>
  </body>
</html>

使用css3翻译滑动div

1 个答案: