2

我在使用translate3dCSS 属性为 div 设置动画时遇到问题。div 必须在页面中向上滑动，并且
div必须向上移动一些像素。.box.container

动画效果很好，除非您在触发之前一直向下滚动页面。如果您向下滚动页面并启动动画，则会从无处弹出一个空白区域，我无法弄清楚那是什么。

这是 CodePen

$("input.toggle").click(function () {
    $('.container').toggleClass('move');
$('.box').toggleClass('move');
});
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 800px;
  /* this is not necessary, it's just a way to avoid putting a lot more text since the issue happens when you scroll all the way down before clicking on the toggle*/
}

.wrapper {
  height: 100vh;
}

input.toggle {
  position: fixed;
  top: 700px;
  left: 50%;
}

.container {
  width: 100%;
  height: 100vh;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  -moz-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  transition: transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.container p {
  padding: 50px;
  margin: 0;
}
.container.move {
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  -moz-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  transition: transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  -webkit-transform: translate3d(0, -300px, 0);
  -moz-transform: translate3d(0, -300px, 0);
  transform: translate3d(0, -300px, 0);
}

.box {
  position: fixed;
  width: 100%;
  height: 500px;
  background: red;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  -moz-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  transition: transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  -webkit-transform: translate3d(0, 500px, 0);
  -moz-transform: translate3d(0, 500px, 0);
  transform: translate3d(0, 500px, 0);
}
.box.move {
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  -moz-transition: -webkit-transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  transition: transform 0.4s cubic-bezier(0.6, 0, 0.4, 1);
  -webkit-transform: translate3d(0, -300px, 0);
  -moz-transform: translate3d(0, -300px, 0);
  transform: translate3d(0, -300px, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

  <div class="container">
<input type="button" class="toggle" value="CLICK ME" />    
    <p>
      In auctor lobortis lacus. Nullam sagittis. Nulla consequat massa quis enim. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Nam eget dui.

Curabitur at lacus ac velit ornare lobortis. Sed cursus turpis vitae tortor. Nulla porta dolor. Vivamus elementum semper nisi. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
    </p>
    <p>
      In auctor lobortis lacus. Nullam sagittis. Nulla consequat massa quis enim. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Nam eget dui.

Aliquam lobortis. Etiam imperdiet imperdiet orci. Quisque malesuada placerat nisl. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Praesent egestas neque eu enim.
    </p>
  </div>
  <div class="box"></div>
</div>

为了更清楚地了解如何重现问题，我制作了一些 gif：

它应该如何工作 当页面没有一直向下滚动时，这就是它的工作原理，这正是我需要它做的

重现错误：
向下滚动页面并单击按钮，使 div 跳起来留下一个空白区域。 在此处输入图像描述

我假设这是一个 Chrome 错误，因为它在 Firefox 上运行良好（尚未测试其他浏览器）。谁能启发我什么是错的？即使页面向下滚动，我怎样才能使这个动画正常工作？

编辑：使用translate而不是translate3d不会改变奇怪的行为。

4

1 回答 1

0

我找不到发生这种情况的具体原因，但是将transfrom3d属性更改为 2dtransform 属性可以解决问题，
因为您没有使用 z 值，它适用于这种情况；

编辑：重新检查我看到我改变了 translateY 属性的笔......

我认为你的问题发生的原因是给容器 div 一个与盒子相反的过渡最终会在底部留下空间

检查我的笔。

于 2015-03-26T21:24:32.027 回答