導致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動畫

回答

相關問題