與顯示沒有CSS動畫關鍵幀作品淡入，但不是淡出

Question

我有這對開始顯示沒有的元素。當我向它添加一個類時，我希望它使用CSS淡入。

我發現this tutorial使用的關鍵幀對淡入淡出效果很好。但是如果我想以同樣的方式淡出，元素會立即隱藏並且不會動畫。

基本上它看起來是這樣的：

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

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

這裏是一個 「工作」 的例子： http://codepen.io/MickL/pen/NAopXN

Answer 1

試圖動畫display:none是你的問題的根源。爲什麼淡入作品和淡出不會在混亂來自同時使用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

你不能動畫或過渡的顯示性能。

注意：這並不是說你不能在關鍵幀動畫中使用它，但這與實際上的動畫效果不一樣。

爲什麼你Codepen演示不按預期工作的原因是因爲.active類被刪除瞬間所以動畫出了沒有時間和開火默認display:none現在立即生效。

既然你無論如何使用jQuery，有一個內置的功能fadeToggle將做你想做的。

$('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>