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

单击菜单中的某个项目时，我试图将一个容器放下。向下的动画效果很好。但是，当我单击菜单中的其他项目时，它不会向上动画。

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是页面中其他卡的列表，父级是第一个容器。

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

谢谢。

最佳答案

由于仅在添加类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()属性的值。

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

关于javascript - 移除类(class)的过渡不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47486196/