javascript - JQuery动画div从右到左平滑

Question

我创建了页面，一开始它会显示黑屏，主屏幕从右到左可见，我尝试使用 jQuery animate 实现，它似乎工作正常但没有平滑度.我尝试使用 CSS 过渡，但没有成功

有人可以建议如何增加平滑度，向左推的屏幕应该平滑且缓慢

这是 JSfiddle Example

编辑 我制作了一个视频来展示它在我的电脑中的显示方式:

https://www.youtube.com/watch?v=yvfxI84Bzt4&feature=youtu.be

谢谢

var winw = $(window).width();
var winh = $(window).height();
var main = $('.mc-root');

$(main).animate({ right: '0' }, 900 );

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}
.main-outer {
  position: absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.mc-root {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 2s linear;
  transition: all 3s linear;
  right:-100%;
  
}
.leftcol {
  width: 130px;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
}
.leftcol > p {
  margin: 50px 0 0 0;
  text-align: center;
}
.rightcol {
  width: calc(100% - 130px);
  background: #666;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}
.rightcol > p {
  margin: 50px 0 0 0;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-outer">
  <div class="mc-root">
    <div class="leftcol">
      <p>NAV</p>
    </div>
    <div class="rightcol">
      <p>MAIN Content</p>
    </div>
  </div>
</div>

Answer 1

这里，我觉得比较流畅，关键在于时间和持续时间，

如果你觉得我的解决方案不够流畅，你可以改变功能或时长

var winw = $(window).width();
var winh = $(window).height();
var main = $('.mc-root');

$(main).animate({ right: '0' }, 900 );

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}
.main-outer {
  position: absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.mc-root {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 2s ease-in-out;
  transition: all 2s ease-in-out;
  right:-100%;
  
}
.leftcol {
  width: 130px;
  height: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  top: 0;
}
.leftcol > p {
  margin: 50px 0 0 0;
  text-align: center;
}
.rightcol {
  width: calc(100% - 130px);
  background: #666;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}
.rightcol > p {
  margin: 50px 0 0 0;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-outer">
  <div class="mc-root">
    <div class="leftcol">
      <p>NAV</p>
    </div>
    <div class="rightcol">
      <p>MAIN Content</p>
    </div>
  </div>
</div>