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。但是，在两个徽标导航栏上设置 z-index 9999 并不能解决问题。

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索引元素隐藏在第百万个z索引元素下面......

将其设置为initial对我有用。

Answer 2

我找到了解决问题的方法，但我不知道为什么这个解决方案有效。通过添加“-webkit-backface-visibility：隐藏；”对于我的徽标元素，当标题上的动画和锚点伪元素上的过渡在加载时运行时，我的徽标不再被裁剪。我想知道是否有人知道为什么这可以解决这个问题。我的徽标元素永远不会在 z 轴上移动。评论区有jsfiddle展示代码

Answer 3

@GughaG 的答案是正确的，如果不需要转发，但如果你确实需要，请尝试添加位置：绝对 - 固定我！

Answer 4

这里的答案最初并没有明确表示转换后的元素不能是彼此的兄弟元素，并且仍然保留 z-index 分层。因此，顶层、中层和底层动画将在彼此以及页面中的其他元素上翻转/翻转，例如模态弹出窗口。

需要发生的是一个包装控制层，它不是动画的，但保存事物的 z 索引顺序。

即来自这个：

<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>

子包装器 1 的 z 索引为 1，子包装器 2 的 z 索引为 2 等，并且不进行动画处理。

这是一个工作小提琴：https://jsfiddle.net/pingram3541/8rdx9u2w/show

Answer 5

我遇到了类似的问题，在我的下一个 js 应用程序中，我在英雄部分有一个移动视图菜单和动画。 我注意到如果我关闭动画元素会返回到以下 z-index，但如果动画正在运行，它们会出现在顶部。我的菜单如果在移动设备上打开，并且动画正在运行，英雄部分显示在菜单上方，因此菜单无法访问。

目前我没有任何好的解决方案，但我为我的应用程序全局创建了一个animationsOnOfff状态变量，并且在打开菜单时将其设置为假，并实现了一种机制，如果这是假的，则在英雄部分停止动画。 因此，如果用户打开菜单，其动画就会停止，使菜单位于英雄部分上方。

IO 尝试使用 z 索引。我给菜单的英雄部分 z 索引为 1 和 100，仍然没有区别，动画高于任何可见的东西以显示自己。