没有显示的CSS动画关键帧无法淡入,但不能淡出 [英] CSS animation keyframes with display none works to fade in, but not fade out
问题描述
我有一个在开始时什么都不显示的元素。当我向它添加类时,我希望它使用CSS淡入。
I have an element which has display none on start. When i add a class to it i want it to fade in, using CSS.
我发现本教程使用对淡入效果很好的关键帧。但是,如果我想以相同的方式淡出,该元素将立即隐藏而没有动画。
I found this tutorial to use keyframes which is working nice for fade in. But if i want to fade out the same way, the element gets hidden immediately with no animation.
基本上看起来像这样:
.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
Here is an "working" example: http://codepen.io/MickL/pen/NAopXN
推荐答案
尝试为 display:none
设置动画是问题的根源。为什么使用淡入和淡出的困惑不是来自同时使用 display
和 opacity
。
Trying to animate the display:none
is the root of your problem. The confusion for why the fade-in works and the fade-out doesn't comes from the combination of using both display
and opacity
.
显示
属性仅由 .active
已应用;动画实际上并没有改变它,而 opacity
却按预期进行了动画处理。在淡入时,这意味着您立即显示元素,然后从透明过渡到不透明。在淡出时,这意味着您可以立即隐藏元素,然后在隐藏时从不透明过渡到透明。
The display
property is only being dictated by whether .active
is applied; the animations aren't actually changing it, whereas the opacity
is animated as expected. On the fade-in, this means that you immediately show your element, which then transitions from transparent to opaque. On the fade-out, this means that you immediately hide your element, which then transitions from opaque to transparent while hidden.
有两种方法可以解决此问题,但它取决于上下文。例如,您可以将其保留为 block
元素,并使用 height
属性使其折叠:
There are a couple different ways you could solve this, but it sort of depends on the context. For example, you could leave it as a block
element and use the height
property to make it collapse:
$('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>
这篇关于没有显示的CSS动画关键帧无法淡入,但不能淡出的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!