javascript - 当元素在移动设备上上下滑动时过渡不流畅？

Question

我使用 CSS 和 jQuery 创建了一个在点击时上下滑动的模式。

在桌面上查看时，它看起来“不错”，但在移动设备上查看时，它会出现抖动。特别是当模态下降时。

我想要实现的是非常平滑的上下滑动。我确实遇到过很多类似的问题，但我没有发现我正在做的事情与建议其他人解决此问题的方法有任何区别。

此模式的主要目的是用于 phonegap 中的混合移动应用程序。这个模态看起来应该类似于 iPhone 上的 YouTube 播放器……因此，如果您在移动设备上打开 YouTube 并播放视频，您会在左上角看到一个向下的箭头。如果您点击/点击它，您会看到 YouTube 播放器将最小化。这就是我想要实现的那种动画效果。

这是我目前所拥有的:

https://jsfiddle.net/zshk3nex/1/

$(document).on('click', '.tol', function() {

  if ($('.hid-box').hasClass("easout")) {
    $('.hid-box').removeClass("easout");
    $('.hid-box').addClass("easin");
    $('.hid-box').css('top', 0);

  } else {
    $('.hid-box').addClass("easin");
    $('.hid-box').css('top', 0);
  }
});


$(document).on('click', '.minifyBtn', function() {

  if ($('.hid-box').hasClass("easin")) {
    $('.hid-box').removeClass("easin");
    $('.hid-box').addClass("easout");
    $('.hid-box').css('top', '90%');

  } else {
    $('.hid-box').addClass("easout");
    $('.hid-box').css('top', '90%');
  }




});

.holder {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: red;
  position: absolute;
  z-index: 9999;
  top: 0;
  height: 100%;
  left: 0;
}

.hid-box {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #ff0;
  position: absolute;
  z-index: 9999;
  top: 100%;
  height: 100%;
}

.easin {
  transition: all 0.2s ease-in;
}

.easout {
  transition: all 0.6s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <button class="tol">
  click here to show modal
  </button>

  <div class="hid-box">
    <div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
      <h1 class="minifyBtn">CSS3 slide up</h1>
      <p style="text-align:center;">
        <div style="text-align:center;" class="dsp player4" id="player4"></div>
      </p>
    </div>
  </div>
</div>

有人可以就此问题提出建议吗？

Answer 1

top 和 bottom 等绝对属性不适合动画。相反，您可以使用 transform。 transform 在动画和过渡中的表现要好得多。

在 transform 中使用百分比时，百分比基于元素框，而不是父元素，就像几乎所有其他 css 值一样。

另一件有助于提高性能的事情是缩小您的 transition 属性。在您的情况下，您已选择转换 all 属性。您可以将其设置为仅转换您需要的属性。在这种情况下，这将是 transition: transform 0.2s ease-in。虽然这不一定。

让我们稍微清理一下您的代码。

$(document).on('click', '.tol', function() {
  $('.hid-box').toggleClass("active")
});

.holder {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: red;
  position: absolute;
  z-index: 9999;
  top: 0;
  height: 100%;
  left: 0;
}

.hid-box {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #ff0;
  position: absolute;
  z-index: 9999;
  top: 100%;
  height: 100%;
  transition: transform 200ms;
}

.hid-box.active {
  transform: translateY(-100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <button class="tol">
  click here to show modal
  </button>

  <div class="hid-box">
    <div style="position:absolute;width:100%;height:100%;top:0;left:0;background:none;z-index:999;">
      <h1 class="minifyBtn">CSS3 slide up</h1>
      <p style="text-align:center;">
        <div style="text-align:center;" class="dsp player4" id="player4"></div>
      </p>
    </div>
  </div>
</div>

我已经删除了您使用的绝大多数 jQuery，现在只切换一个类。我已将过渡移至主要元素。我还添加了一个 active 类，它只是将 transform 属性设置为 translateY(-100%)。这意味着它将移动 -100% 元素高度。

所有这些都应该使它在移动设备上表现更好。但是，归根结底，这还取决于您设备的强度。如果它稍旧一些，它的性能可能不会那么好。

希望对您有所帮助!