javascript - 使用 translateY() 移动没有空格的隐藏元素

Question

我想创建一个动画来在用户单击某个元素时显示某个部分。该部分在页面加载时保持隐藏状态 (translateY(-700px))。单击事件更改切换类 ._active 在 margin-bottom 属性上使用转换会导致动画的 FPS 计数较低。

问题:有没有一种方法可以使此部分在隐藏时不留空白而动画化？

以下部分的 SASS 代码

.section {
  padding: 50px 0 20px 0;
  background-color: black;
  display: block;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
  transform: translateY(-700px);
  transition: transform 1s;

  &._active {
    transform: translate(0, 0);
    margin-bottom: 0;
  }
}

Answer 1

当您使用 translate 时，浏览器会记住样式元素的实际大小。如果你能删除 padding , 一种接近它的选择是过渡 height连同 translateY :

var toggler = document.getElementById("toggler");
var toggled = document.getElementById("toggled");

toggler.addEventListener("click", e => {
  toggled.classList.toggle('_active');
})

.section {
  /* padding: 50px 0 20px 0; */
  background-color: black;
  color: white;
  display: block;
  height: 0;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05);
  transform: translateY(-700px);  
  -webkit-transform: translateY(-700px);
  transition: transform 1s, height 1s;
  -webkit-transition: transform 1s, height 1s;
}
.section._active {
    transform: translate(0, 0);
    margin-bottom: 0;
    height: 130px; /* adjust for your section content */
}

<button id="toggler">Toggle visibility</button>

<section id="toggled" class="section"></section>

<section>
    <p>
  Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
  </p>
</section>

如果您要在您的版 block 中包含任何内容，填充 的一种方法是使用 border与部分背景颜色相同，结合调整 height您的属性(property) _active类。