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>

如果你要在你的部分中有任何内容，一个黑客 pad 它正在使用与部分背景颜色相同的border，并结合调整height你_active班的财产。

使用translateY（）移动隐藏元素而不留空格

1 个答案: