javascript - jquery 侧边导航在移动设备上不流畅

Question

我用 Jquery 制作的侧边导航有问题，它在笔记本电脑或台式机上运行良好，但在移动设备上，转换不像在台式机或笔记本电脑上那样流畅 我不知道是什么导致了这个问题

如果你想知道我通过切换一个从左侧占据侧边导航位置的类来实现侧边导航:-30%；到 30%

Answer 1

我真的很想向您展示性能上的差异。查看我的演示。单击一个框以查看它的移动。即使在我的新 MacBook Air 上，我也能分辨出不同之处。正如您所注意到的，在移动设备上，差异更为明显。

$(".box").on("click", function() {
  $(this).addClass("start");
})

$(".reset").on("click", function() {
  $(".box").removeClass("start");
})

@keyframes moveWithLeft {
  from {
    left: 0; 
  }
  to {
    left: calc(100vw - var(--box-width));
  }
}

@keyframes moveWithTransform {
  to {
    transform: translate(calc(100vw - var(--box-width)));
  }
}

.box {
  --box-width: 80px;
  --box-height: 70px;  
  width: var(--box-width);
  height: var(--box-height);
  line-height: var(--box-height);  
  background-color: rgba(0, 128, 0, 1);
  position: absolute;
  color: white;
  display: inline-block;
  cursor: pointer;
  font-family: helvetica;
  transition: 0.3s background-color ease-in-out;
}

.box:hover {
  background-color: rgba(0, 128, 0, .8);
}

.box span {
  text-align: center;
  display:  block;
  font-size: 85%;
}

.box.two {
  top: calc(var(--box-height) + 5px);
}

.one.start {
  animation: 3s moveWithLeft forwards; 
}

.two.start {
  animation: 3s moveWithTransform forwards; 
}

button {
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 1.2rem;
  font-family: helvetica;
  padding: 10px;
  border: none;
}


html, body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box one"><span>Left</span></div>
<div class="box two"><span>Transform</span></div>

<button class="reset">Reset</button>

jsFiddle