ディスプレイのあるCSSアニメーションキーフレームは、フェードインすることはできませんが、フェードアウトはしません。

Question

開始時に表示なしの要素があります。クラスを追加すると、CSSを使用してフェードインされます。

私はthis tutorialがフェードインに適しているキーフレームを使用していますが、同じ方法でフェードアウトしたい場合、要素はアニメーションなしですぐに非表示になります。

基本的には次のようになります。あなたはdisplayプロパティをアニメーション化または移行することはできません http://codepen.io/MickL/pen/NAopXN

Answer 1

。フェードインが動作する理由とフェードアウトが混乱する理由は、displayとopacityの両方を組み合わせたものではありません。

displayプロパティは、.activeが適用されるかどうかによってのみ指定されます。アニメーションは実際には変更されませんが、opacityは期待どおりにアニメートされます。フェードインでは、要素がすぐに表示され、次に要素が透明から不透明に移行することを意味します。フェードアウトでは、エレメントをすぐに非表示にしてから、非表示から非表示に遷移します。

これを解決するにはいくつかの方法がありますが、その種類は状況によって異なります。たとえば、block要素としてそれを残し、それを崩壊させるためにheightプロパティを使用できます。

$('button').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $(this).siblings('.box').toggleClass('active'); 
 
})

@import "bourbon"; 
 
* { 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
} 
 
button { 
 
    margin: 30px 0; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
    padding: 1em; 
 
    background: none; 
 
    box-shadow: none; 
 
} 
 
.box { 
 
    margin: 0 auto; 
 
    width: 80%; 
 
    height: 0; 
 
    display: block; 
 
    line-height: 100px; 
 
    background: #ccc; 
 
    border: 1px solid #444; 
 
    text-align: center; 
 
    opacity: 0; 
 
    animation: FadeOut 1s ease-in-out; 
 
} 
 
.box.active { 
 
    display: block; 
 
    height: initial; 
 
    opacity: 1; 
 
    animation: FadeIn 1s ease-in-out; 
 
} 
 
@keyframes FadeIn { 
 
    0% { 
 
    opacity: 0; 
 
    height: initial; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    height: initial; 
 
    } 
 
} 
 
@keyframes FadeOut { 
 
    0% { 
 
    opacity: 1; 
 
    height: initial; 
 
    } 
 
    99% { 
 
    opacity: 0; 
 
    height: initial; 
 
    } 
 
    100% { 
 
    height: 0; 
 
    opacity: 0; 
 
    height: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col"> 
 
    <button class="toggle-good">Toggle display</button> 
 
    <p class="box good">I move nicely!</p> 
 
    <p>Extra paragraph to show collapse</p> 
 
</div>

Answer 2

：ここ

.box { 
    display: none; 
    opacity: 0; 
    animation: FadeOut 1s ease-in-out; 

    &.active { 
    display: block; 
    opacity: 1; 
    animation: FadeIn 1s ease-in-out; 
    } 
} 

は "作業" の例です。

注：これはキーフレームアニメーションでは使用できないとは限りませんが、と実際にはと同じではありません。 .activeクラスは即座ので、アニメーションを削除発射する時間がないとデフォルトdisplay:noneは今すぐに適用されているので

あなたCodepenデモが意図したとおりに動作しない理由はあります。

とにかくJqueryを使用しているので、便利な機能を内蔵したfadeToggleがあります。 display:noneがあなたの問題の根本であるアニメーション化しようとすると

$('button').on('click', function(e) { 
 
    e.preventDefault(); 
 
    $(this).siblings('.box').fadeToggle(500); 
 
})

* { 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
} 
 
button { 
 
    margin: 30px 0; 
 
    border: 1px solid #ccc; 
 
    text-align: center; 
 
    padding: 1em; 
 
    background: none; 
 
    box-shadow: none; 
 
} 
 
.box { 
 
    margin: 0 auto; 
 
    width: 80%; 
 
    display: none; 
 
    line-height: 100px; 
 
    background: #ccc; 
 
    border: 1px solid #444; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col"> 
 
    <button class="toggle-good">Toggle display</button> 
 
    <p class="box good">I move nicely!</p> 
 
</div>