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指定了显式高度，因此再次删除此类时无法观察到预期的行为，因为元素的继承状态有问题没有明确的高度定义。所以它只是＆＃34; pops＆＃34;备份。

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

.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()属性值可以保持直观。

课堂移除过渡不起作用

1 个答案: