類刪除不工作的過渡

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()屬性值可以保持直觀。