CSS动画填充模式和z-index问题 [英] CSS animation-fill-mode and z-index issue
问题描述
我正在研究的项目中使用CSS动画(来自animate.css).我发现，当在一个带有绝对位置且z索引子级的容器中褪色时，该子级的z索引无法正常工作.
I'm using CSS animations (from animate.css) in a project I'm working on. What I found out is that when fading in a container with an absolutely positioned and z-indexed child in it, the z-index of the child isn't working as it should.
我在这个小提琴中重新创建了这个问题: http://jsfiddle.net/Lxsf9ako/
I recreated the issue in this fiddle: http://jsfiddle.net/Lxsf9ako/
问题似乎是由
animation-fill-mode: both;
此样式由animate.css放置在容器上，因此我对此无法控制.我可以使用 animation-fill-mode:none 覆盖它，但是我不希望每个动画都这么做.
This style is placed on the container by animate.css, thus I have no control over this. I could overwrite it by using animation-fill-mode: none, but I rather don't do this for every animation.
对此有什么想法吗?
更新:我刚刚发现这与webkit有关，IE11可以正确呈现它.
Update: I just found out this is webkit related, IE11 renders this correctly.
更新2:我无法在悬停时编辑 .container 类.
Update 2:
I can't edit the .container class on hover.
更新3:小提琴中的悬停"只是一个演示.实际上， .over 对象是angular-ui-bootstrap datepicker指令的弹出窗口，而 .container 元素是整个应用程序中使用的通用元素.给他们一个额外的ID/类以将其标识为Datepicker容器对我来说不是一个干净的解决方案.
Update 3:
The 'hover' in the Fiddle is just a demo. In fact, the .over object is the popup from the angular-ui-bootstrap datepicker directive, and the .container elements are generic elements used throughout the application. Giving them an extra id/class to identify them as datepicker containers is not a clean solution for me.
推荐答案
只需添加
#hoverme{
z-index: 1;
}
DEMO
在没有任何z-index值的情况下，元素按其顺序堆叠出现在DOM中(在同一层次结构级别中最低的一个出现在顶部).具有非静态定位的元素将始终显示在具有默认静态位置的元素顶部.
Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning.
还请注意，嵌套起着重要的作用.如果元素B位于顶部元素A的子元素永远不能高于元素B.
Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.
#hoverme {
z-index: 1;
}
.container {
background: rgb(255, 255, 255);
/* Old browsers */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#efefef));
background: -webkit-linear-gradient(#fff 0%, #efefef 100%);
background: -moz-linear-gradient(#fff 0%, #efefef 100%);
background: -o-linear-gradient(#fff 0%, #efefef 100%);
background: linear-gradient(#fff 0%, #efefef 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef', GradientType=0);
/* IE6-9 */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: block;
width: 100%;
border: 1px solid #c7c7c7;
margin-bottom: 10px;
position: relative;
padding: 20px;
box-sizing: border-box;
-webkit-animation-name: fadeIn;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation-name: fadeIn;
/* Firefox < 16 */
-ms-animation-name: fadeIn;
/* Internet Explorer */
-o-animation-name: fadeIn;
/* Opera < 12.1 */
animation-name: fadeIn;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
#hoverme .over {
display: none;
padding: 20px;
position: absolute;
top: 20px;
left: 20px;
width: 200px;
background: #efefef;
z-index: 10;
box-sizing: border-box;
-webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
}
#hoverme:hover .over {
display: block;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div id="hoverme" class="container">
<div class="over">I should be over the next container</div>
</div>
<div class="container">I should be under the .over</div>下
您还可以在 .over 上使用带有 opacity 和 visibility 的过渡.
You could also use a transition on the .over with opacity and visibility.
#hoverme .over {
opacity: 0;
visibility:hidden;
transition:visibility 0.4s, opacity 0.4s;
...
}
#hoverme:hover .over {
visibility:visible;
opacity:1;
}
DEMO
.container {
background: rgb(255, 255, 255);
/* Old browsers */
background: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#efefef));
background: -webkit-linear-gradient(#fff 0%, #efefef 100%);
background: -moz-linear-gradient(#fff 0%, #efefef 100%);
background: -o-linear-gradient(#fff 0%, #efefef 100%);
background: linear-gradient(#fff 0%, #efefef 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#efefef', GradientType=0);
/* IE6-9 */
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: block;
width: 100%;
border: 1px solid #c7c7c7;
margin-bottom: 10px;
position: relative;
padding: 20px;
box-sizing: border-box;
}
#hoverme .over {
opacity: 0;
visibility: hidden;
transition: visibility 0.4s, opacity 0.4s;
padding: 20px;
position: absolute;
top: 20px;
left: 20px;
width: 200px;
background: #efefef;
z-index: 10;
box-sizing: border-box;
-webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.75);
}
#hoverme:hover .over {
visibility: visible;
opacity: 1;
}<div id="hoverme" class="container">
<div class="over">I should be over the next container</div>
</div>
<div class="container">I should be under the .over</div>下
这篇关于CSS动画填充模式和z-index问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
