导致z-index问题的CSS动画

我的main.js文件中有一个奇怪的冲突。我运行一个淡入淡出的动画“主要-标题 - 左”导致z-index问题的CSS动画

这工作得很好，但是当我添加一段代码，使得导航链接活跃的依据是什么页面的用户是，动画会阻挡悬挂在导航栏上的徽标（徽标高度>导航栏固定高度）。这是代码：

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索引不能解决问题。

来源

2015-08-08 Mouse6541

极其不清楚，即使标题是css动画，也没有代码显示该动画是什么或相关的z-index是什么。 –

我已经更新了使用css动画的问题以及这种情况下有关z-index的信息。此行为可能与z-index无关，可能是Chrome中的错误，因为这两段代码无关，导致我的徽标被修剪到父导航栏容器中，直到动画完成运行。 – Mouse6541

如果包含所有相关的HTML和CSS，会更容易;足以重现问题。尤其是“主动”类。我现在所能说的是，“不透明”可能会导致问题，因为它与z层混淆。 – misterManSam

我发现了一个解决我的问题，但我不知道为什么这个解决方案的工作原理。通过添加“-webkit-backface-visibility：hidden;”对于我的徽标元素，当我的标题上的动画和我的锚的伪元素上的转换在加载时运行时，我的徽标不再被裁剪。我想知道是否有人知道为什么这会解决这个问题。我的标识元素从不在z轴上移动。有一个在评论部分，显示代码

来源

2015-08-09 00:58:18 Mouse6541

今天我遇到了类似的问题上的jsfiddle ......我修补它通过改变动画填充模式的价值动画如下类...

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

值得注意的是，动画填充模式设置为前锋引起了我的问题......

动画填充模式：既继承了前锋以及向后属性，所以我万亿z-index的元素得到了百万分之一的z-index元素藏...

将其设置为初始为我工作。

来源

2016-09-14 16:32:18 GughaG

这应该是正确的答案！我一直试图解决这个问题几个小时......像魅力一样工作;） –

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

来源

2017-10-12 05:52:25 ZDL

导致z-index问题的CSS动画

回答

相关问题