JQuery从右到左动画div平滑

Question

我创建了页面，在开始它将显示黑屏，从右到左主屏幕将可见，我尝试使用jQuery动画实现，它似乎工作正常但没有平滑。我试过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>

Answer 2

我并不完全明白你期望的平滑度，但我确信通过看到很多例子，与css相比，jquery无法获得更流畅的动画效果。所以我建议你使用css过渡。

以下更改应该像魅力一样

//at CSS file
.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%;
}
.slide .mc-root{
  right:0;
}
//on your js place it whenever you want animation to happen
$('.main-outer').addClass("slide");

easy-in-out可以创建更自然的动画。 我建议你把动画持续时间减少到1或2秒。大多数互联网用户对动画不感兴趣，如果它们太长并且在我看来它太长了。但它是你的选择

Answer 3

只能使用 CSS animation属性：

设置right:0%;并从right:-100%;

设置关键帧

＆＃13;

＆＃13;

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: 0%;
  animation: slideIn 2s ease;
}

@keyframes slideIn {
  from {
    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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;