在一條線后面滑動多個div時屏蔽問題

Question

我有一個CSS動畫效果，由於分層問題很難實現。 請參閱下面的代碼：

 var toggle = document.getElementById('toggle'); function toggleF() { 'use strict'; document.querySelector('nav').classList.add('fuzzyState'); } toggle.addEventListener('click', toggleF); 

 body { height: 90%; color: #222; text-align: center overflow:hidden; } button { outline: 0; cursor: pointer } #toggle { float: left; width: 38px; height: 38px; padding: 5px; margin: auto; background: #fff; color: #666; border: 0; font-size: 150% } #toggle:hover { background: #222; color: #eee; user-select: none; -webkit-user-select: none } #toggle:active { background: #022; color: #fff } nav ul:after { content""; display: block; clear: both } nav ul { height: 150px; margin: 0; padding: 0; font-size: 150% } nav li { width: 140px; height: 140px; margin: 5px; float: left; list-style: none; user-select: none; -webkit-user-select: none } nav button { display: block; position: relative; top: 50%; width: 100%; height: 100%; background: transparent; border: 0; text-transform: uppercase; transform: translateY(-50%) } nav button:hover { background: #022; color: #eee } nav button:active { background: #033; color: #fff } ul hr { position: relative; top: 50%; width: 1px; height: 90px; margin: 10px; background: #eee; border: 0; float: left; transform: translateY(-50%); z-index: 2 } nav.fuzzyState #dos { transform: translateX(230px) } nav.fuzzyState #uno { transform: translateX(400px); -webkit-filter: blur(1px) } nav.fuzzyState #tres { /*transform:translateX(-230px)*/ } nav #tres { position: relative; z-index: 1 } #leftNavMask { background: #fff; position: absolute; top: 15%; right: 0; left: 356px; width: 200px; height: 190px; text-align: justify; transform: translateY(-50%); } #rightNavMask { background: #fff; position: absolute; top: 15%; right: 0; left: 156px; width: 200px; height: 190px; text-align: justify; transform: translateY(-50%); z-index: -1 } #dos, #tres { transition: transform 0.7s ease-in-out } #uno { transition: transform 1s ease-in-out, -webkit-filter 1s ease-in-out; } 

 <button id="toggle">+</button> <nav> <ul> <li id="uno"><button>uno</button></li> <li id="dos"><button>dos</button></li> <hr> <li id="tres"><button>tres</button></li> <div id="leftNavMask"></div> <div id="rightNavMask"></div> </ul> </nav> 

單擊+按鈕后，我的目標是使tres按鈕向左滑動，同時像uno和dos按鈕一樣被屏蔽，除了相反的方向。 這似乎是不可能的，因為無論我給任何元素的z-index ，都沒有辦法讓左面具在正確的元素之上，同時讓正確的面具完成它的工作。 沒有jQuery有沒有簡單的方法可以做到這一點？ 謝謝。

澄清一下： uno和dos按鈕當前位於一個顏色與背景相匹配的div下。 我需要的tres按鍵上滑動的第二下左div以某種方式在上面tres按鈕來屏蔽，但也低於uno和dos按鈕，使其不被堵塞開頭。

Answer 1

因此，問這個問題很久以后，很可能你已經找到了解決方案。 但為了以防萬一，在這里你可以找到你想要實現的目標。

而不是使用具有相同背景顏色的絕對定位div來覆蓋動畫li元素，為什么不在ul容器中使用overflow hidden屬性？ 如果你這樣做， ul將充當“掩碼”，當li元素在ul之外被動畫化時，它們將自動“隱藏”。 看一下使用這種方法修改過的代碼片段（我使用了兩個ul元素分別為li元素設置動畫）：

我看到你在ul元素中放置了一個hr （和兩個div ）， ul 應該只包含li元素 。 對於這個解決方案，我使用偽元素來模擬垂直線。

 var toggle = document.getElementById('toggle'); function toggleF() { document.querySelector('nav').classList.toggle('fuzzyState'); } toggle.addEventListener('click', toggleF); 

 body { color: #222; } button { cursor: pointer; outline: 0; } #toggle { background: #fff; border: 0; color: #666; float: left; font-size: 150%; height: 38px; margin: auto; padding: 5px; width: 38px; } #toggle:hover { background: #222; color: #eee; user-select: none; } #toggle:active { background: #022; color: #fff } nav ul { display: inline-block; font-size: 150%; margin: 0; overflow: hidden; padding: 0; position: relative; } nav ul.left::after { content: ""; display: block; border-right: 1px solid #eee; height: 90px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } nav li { display: inline-block; height: 140px; list-style: none; margin: 5px; user-select: none; transition: transform 0.7s ease-in-out; width: 140px; } nav button { background: transparent; border: 0; display: block; height: 100%; position: relative; text-transform: uppercase; top: 50%; transform: translateY(-50%); width: 100%; } nav button:hover { background: #022; color: #eee; } nav button:active { background: #033; color: #fff; } nav.fuzzyState ul > li { pointer-events: none; } nav.fuzzyState ul.left > li { transform: translateX(200%); } nav.fuzzyState ul.right > li { transform: translateX(-100%); } 

 <button id="toggle">+</button> <nav> <ul class="left"> <li><button>uno</button></li> <li><button>dos</button></li> </ul> <ul class="right"> <li><button>tres</button></li> </ul> </nav>