作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个元素在开始时没有显示。当我向它添加一个类时,我希望它使用 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
最佳答案
尝试为 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>
关于带显示的 CSS 动画关键帧无法淡入,但不会淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38934595/
我是一名优秀的程序员,十分优秀!