CSS动画导致z-index问题

Question

我在main.js文件中遇到了一个奇怪的冲突。我在".main-headline--left"上运行了一个淡入动画。

$('.main-headline--left').addClass('wow animated fadeInUp');

这段代码本来是正常工作的，但当我加入一段代码，根据用户所在页面使导航链接活跃时，动画会遮挡住悬挂在导航栏上方的标志（标志高度> 导航栏固定高度）。下面是那段代码：

if(location.pathname != "/") {
    $('.navbar-nav--split a[href^="/' + location.pathname.split("/")[3] + '"]').addClass('is-active');
} else $('.navbar-nav--split a:eq(0)').addClass('is-active');

我注意到这只发生在Chrome浏览器中。也许有更好的方式来组织我的Javascript代码，或者有更好的编写代码的方式，以便解决这个问题吗？

这里是CSS动画：

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
        transition: .1s transform, .1s opacity;
    }
    100% {
        opacity: 1;
        transform: translateY(0px);     
    }
}

我没有明确地在包含元素上设置z-index。然而，在标志导航栏上设置9999的z-index并不能解决问题。

- Mouse6541

---

非常不清楚，而且尽管标题是CSS动画，但没有代码显示该动画是什么或相关的z-index是什么。 - marblewraith

我已经更新了问题，包括使用的CSS动画以及在这种情况下关于z-index的信息。这种行为可能与z-index无关，并且可能是Chrome中的一个错误，因为这两个与彼此无关的代码片段会导致我的标志被裁剪到父级导航栏容器，直到动画完成运行。 - Mouse6541

如果您包含所有相关的HTML和CSS，重现问题会更容易得多。特别是is-active类。目前我能说的是，opacity可能会导致问题，因为它会干扰z层。 - misterManSam

这个类非常基础，但涉及到自定义mixin，可以在悬停时从伪元素创建一条线。我真的不认为从深入代码的内部工作中解决问题，因为：1）它们很简单，而这是一个由交互引起的复杂问题；2）这两个代码片段独立工作得很好；3）在除Chrome之外的浏览器中，这两个代码片段也能正常工作。 - Mouse6541

我正在寻找关于Chrome的错误信息。我想知道是否有人在处理Chrome中的动画时遇到了类似的问题。 - Mouse6541

Answer 1

今天我遇到了类似的问题... 我通过修改animated类的动画填充模式(animation-fill-mode)值来解决它，修改如下...

.animated
{
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: initial; //Changed from both to initial 
animation-fill-mode: initial; /*Changed from both to initial
}

值得注意的是，将动画填充模式设置为forwards导致了我的问题...

animation-fill-mode: both继承了forwards和backwards属性，因此我的第一千个z-index元素被隐藏在第一百万个z-index元素下面...

将其设置为initial对我起了作用。

- GughaG

---

这应该是正确的答案！我已经试图修复它几个小时了...现在运行得很好 ;) - jsadev.net

我也解决了。这对我来说是一个相当头痛的问题。谢谢！ - Benny Bottema

Answer 2

我找到了解决我的问题的方法，但我不知道为什么这个解决方案有效。通过将“-webkit-backface-visibility: hidden;”添加到我的标志元素中，当加载标题动画和锚伪元素的转换时，我的标志不再被裁剪。我想知道是否有人知道为什么会解决这个问题。我的标志元素在z轴上从未移动过。评论部分有一个jsfiddle展示了代码。

- Mouse6541

Answer 3

这里的答案最初没有明确说明转换后的元素不能作为彼此的兄弟姐妹仍然保留z-index图层。因此，一个顶部、中间和底部层的动画会在彼此和页面中的其他元素上翻转/翻转，例如模态弹出窗口。

需要发生的是一个包装控制层，不进行动画但保持事物的z-index顺序。

即，从这个：

<wrapper>
  <child-1 /> <- animated element bottom layer
  <child-2 /> <- animated element middle layer
  <child-3 /> <- animated element top layer
</wrapper>

转换为这个：

<wrapper>
  <child-wrapper-1>
    <child-1 /> <- animated element bottom layer
  </child-wrapper-1>
  <child-wrapper-2>
    <child-2 /> <- animated element middle layer
  </child-wrapper-2>
  <child-wrapper-3>
    <child-3 /> <- animated element top layer
  </child-wrapper-3>
</wrapper>

其中，child-wrapper 1 的 z-index 为 1，child-wrapper 2 的 z-index 为 2 等等，并且它们都没有动画效果。

这里有一个可用的 fiddle：https://jsfiddle.net/pingram3541/8rdx9u2w/show

- Philip Ingram

Answer 4

@GughaG的回答是正确的，如果不需要前向，则可以使用该方法，但如果需要，请尝试添加position: absolute -- 这个方法对我很有帮助！

- ZDL