クラス削除の移行が機能しない

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()のプロパティ値は直感的なままです。