Question

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

在台式机上查看时，它看起来像“ OK”，但在移动设备上查看时，它会变得生涩。尤其是当模态下降时。

我想要实现的是非常平滑的上下滑动。我确实遇到了很多类似的问题，但是我在做什么和为解决此问题而向其他人提出的建议之间没有任何区别。

此模式的主要目的是在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%。

所有这些都应使其在移动设备上的性能更好。但是，归根结底，这还取决于设备的强度。如果年龄稍大，它的性能可能不会很好。

希望对您有帮助！

当元素在移动设备上上下滑动时，过渡会变得混乱吗？

1 个答案: