与显示没有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>