javascript - CSS 动画导致 z-index 问题

Question

我的 main.js 文件中有一个奇怪的冲突。我在“.main-headline--left”上运行淡入淡出动画

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

这很好用，但是当我添加一段代码使导航链接根据用户所在的页面处于事件状态时，动画会阻挡悬卡在导航栏上的 Logo ( Logo 高度 > 导航栏固定高度)。这是代码:

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。但是，在两个 Logo 导航栏上将 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
}

值得注意的是，将 animation-fill-mode 设置为 forwards 导致了我的问题...

animation-fill-mode: both 继承了 forwards 和 backwards 属性，所以我的万亿个 z-index 元素被隐藏在第百万个 z-index 元素...

将它设置为 initial 对我有用。