javascript - 类(class)移除的过渡不起作用

Question

当我点击菜单中的元素时，我试图让一个容器下降。向下的动画效果很好。但是当我点击菜单中的不同元素时，它不会向上动画。

CSS:

.card{
    width: 100%;
    background: blue;
    transform: translateY(-100px);
    opacity: 0;
    height:0;
    min-height: 0;
    transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
    transition-property: opacity,transform;
    transition-duration: 1s;
}
.card-appeared{
    margin-top: 0;
    opacity: 1;
    transform: translateY(0);
    min-height: 300px;
    transition-delay: 1s;
    height:auto;
    width: 100%;
}

HTML:

<div id="aboutme" class="container card ">
    About me
</div>
<div id="gallery" class="container card card-appeared">
    Gallery
</div>

用于添加和删除类的基本 javascript

function appear(child){
    parent.classList.remove("card-appeared");
    let others = document.getElementsByClassName("card-appeared");
    for(var i = 0; i < others.length;i++){
        others[i].classList.remove("card-appeared");
    }
    child.classList.add("card-appeared");
}
function dissapear(child) {
    child.classList.remove("card-appeared");
    parent.classList.add("card-appeared");
}

others 是页面中其他卡片的列表，父级是第一个容器。

如果您需要任何其他代码，请告诉我。我似乎无法让向上的动画正常工作，但向下的动画确实有效。

谢谢。

Answer 1

由于只有在添加 card-appeared 类时才指定显式高度，使用 min-height 属性，在添加此类时无法观察到预期的行为再次删除，因为相关元素的继承状态没有明确定义高度。所以它只是“弹出”备份。

要解决此问题，请考虑以下事项:

.card {
  width: 100%;
  background: blue;
  transform: translateY(-600px); /* adjusted */
  opacity: 0;
  height: 0;
  min-height: 300px; /* added */
  transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
  transition-property: opacity, transform;
  transition-duration: 1s;
}

.card-appeared {
  margin-top: 0;
  opacity: 1;
  transform: translateY(-300px); /* adjusted */
  transition-delay: 1s;
  height: auto;
  width: 100%;
}

分解:由于此处使用的是静态定位，具有 y 定位偏移的元素仍将占据 DOM 中的空间。为了解决这个问题，transform:translateY() 属性的值必须进行相应调整，因为相关元素始终定义了最小高度。

考虑:一个更好的解决方案可能是利用绝对定位；这将从文档的自然流中删除有问题的元素，这意味着您不必考虑这些元素在 DOM 中占用的空间，因此 transform: translateY() 属性值可以保持直观。