CSS 动画 CSS3：显示 + 不透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8449933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animation CSS3: display + opacity
提问by Alexis Delrieu
I have got a problem with a CSS3 animation.
我的 CSS3 动画有问题。
.child {
opacity: 0;
display: none;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.parent:hover .child {
opacity: 0.9;
display: block;
}
This code only works if I remove the change of display.
此代码仅在我删除display.
I want to change the display just after the hover but the opacity should be changed using the transition.
我想在悬停后立即更改显示，但应使用过渡更改不透明度。
采纳答案by Alexis Delrieu
I changed a bit but the result is beautiful.
我改变了一点，但结果很漂亮。
.child {
width: 0px;
height: 0px;
opacity: 0;
}
.parent:hover child {
width: 150px;
height: 300px;
opacity: .9;
}
Thank you to everyone.
谢谢大家。
回答by Chris
Based on Michaels answer this is the actual CSS code to use
根据 Michaels 的回答，这是要使用的实际 CSS 代码
.parent:hover .child
{
display: block;
-webkit-animation: fadeInFromNone 0.5s ease-out;
-moz-animation: fadeInFromNone 0.5s ease-out;
-o-animation: fadeInFromNone 0.5s ease-out;
animation: fadeInFromNone 0.5s ease-out;
}
@-webkit-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-moz-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-o-keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@keyframes fadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
回答by Michael Mullany
You can do with CSS animations:
您可以使用 CSS 动画：
0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;
回答by tomas.satinsky
If possible - use visibilityinstead of display
如果可能 - 使用visibility代替display
For instance:
例如：
.child {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
}
.parent:hover .child {
visibility: visible;
opacity: 1;
transition: opacity 0.3s, visibility 0.3s;
}
回答by Hermann Schwarz
This workaround works:
此解决方法有效：
define a “keyframe”:
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0.3; } 60% { opacity: 0.5; } 80% { opacity: 0.9; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0.3; } 60% { opacity: 0.5; } 80% { opacity: 0.9; } 100% { opacity: 1; } }Use this “keyframe” on “hover”:
div a span { display: none; } div a:hover span { display: block; -webkit-animation-name: fadeIn; -webkit-animation-duration: 1s; animation-name: fadeIn; animation-duration: 1s; }
定义一个“关键帧”：
@-webkit-keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0.3; } 60% { opacity: 0.5; } 80% { opacity: 0.9; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 40% { opacity: 0.3; } 60% { opacity: 0.5; } 80% { opacity: 0.9; } 100% { opacity: 1; } }在“悬停”上使用这个“关键帧”：
div a span { display: none; } div a:hover span { display: block; -webkit-animation-name: fadeIn; -webkit-animation-duration: 1s; animation-name: fadeIn; animation-duration: 1s; }
回答by felixhirschfeld
I used this to achieve it. They fade on hover but take no space when hidden, perfect!
我用它来实现它。它们在悬停时消失，但隐藏时不占用空间，完美！
.child {
height: 0px;
opacity: 0;
visibility: hidden;
transition: all .5s ease-in-out;
}
.parent:hover child {
height: auto;
opacity: 1;
visibility: visible;
}
回答by RafaelKr
There is another good method to get this done by using pointer-events:
还有另一种使用指针事件完成此操作的好方法：
.child {
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.parent:hover .child {
opacity: 0.9;
pointer-events: all;
}
Unfortunately, this is not supported in IE10 and below.
不幸的是，这在 IE10 及更低版本中不受支持。
回答by daniel.sedlacek
If you are triggering the change with JS, let's say on click, there is a nice workaround.
如果您使用 JS 触发更改，假设单击时，有一个很好的解决方法。
You see the problem happens because the animation is ignored on display:none element but browser applies all the changes at once and the element is never display:blockwhile not animated at the same time.
您会看到问题的发生是因为在 display:none 元素上忽略了动画，但浏览器一次应用了所有更改，并且元素从不显示：block而不是同时动画。
The trick is to ask the browser to render the frame after changing the visibility but before triggering the animation.
诀窍是要求浏览器在更改可见性之后但在触发动画之前渲染帧。
Here is a JQuery example:
这是一个 JQuery 示例：
$('.child').css({"display":"block"});
//now ask the browser what is the value of the display property
$('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
//now a change to opacity will trigger the animation
$('.child').css("opacity":100);
回答by Dave
I had the same problem. I tried using animations instead of transitions - as suggested by @MichaelMullany and @Chris - but it only worked for webkit browsers even if I copy-pasted with "-moz" and "-o" prefixes.
我有同样的问题。我尝试使用动画而不是过渡——正如@MichaelMullany 和@Chris 所建议的那样——但它只适用于 webkit 浏览器，即使我用“-moz”和“-o”前缀复制粘贴。
I was able to get around the problem by using visibilityinstead of display. This works for me because my child element is position: absolute, so document flow isn't being affected. It might work for others too.
我能够通过使用visibility而不是display. 这对我有用，因为我的子元素是position: absolute，所以文档流不受影响。它可能也适用于其他人。
This is what the original code would look like using my solution:
这是使用我的解决方案的原始代码的样子：
.child {
position: absolute;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.parent:hover .child {
position: relative;
opacity: 0.9;
visibility: visible;
}
回答by Luca Steeb
On absolute or fixed elements you could also use z-index:
在绝对或固定元素上，您还可以使用 z-index：
.item {
position: absolute;
z-index: -100;
}
.item:hover {
z-index: 100;
}
Other elements should have a z-index between -100 and 100 now.
现在其他元素的 z-index 应该在 -100 到 100 之间。
