Question

我的main.js文件中有一个奇怪的冲突。我在＆＃34; .main-headline - left＆＃34;上运行了一个淡出动画。

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

这样可以正常工作，但是当我添加一段代码，根据用户所在的页面激活导航链接时，动画会阻挡挂在导航栏上的徽标（徽标高度＆gt;导航栏固定高度）。这是代码：

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
{
-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元素......

将其设置为 initial 对我有用。

Answer 2

我找到了解决问题的方法，但我不知道为什么这个解决方案有效。通过添加＆＃34; -webkit-backface-visibility：hidden;＆＃34;对于我的徽标元素，当我的标题上的动画和我的锚点上的伪元素的转换在加载时运行时，我的徽标不再被裁剪。我想知道是否有人知道为什么这会解决这个问题。我的徽标元素永远不会在z轴上移动。注释部分中有一个jsfiddle，显示代码

Answer 3

@GughaG的答案是正确的，如果不需要前锋，但如果你确实需要，尝试添加位置：绝对 - 修正我吧！

导致z-index问题的CSS动画

3 个答案: