类删除不工作的过渡

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> 

添加和移除类

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基本的JavaScript是其他卡在页面列表和父第一个容器。

如果您需要任何其他代码，请让我知道。我似乎无法获得向上的动画效果，但动画效果不起作用。

谢谢。

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()属性的值，因为所讨论的元素总是具有定义的最小高度。

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