javascript - 在一行后面滑动多个 div 时出现屏蔽问题

Question

我有一个 CSS 动画效果，由于 layering 问题很难实现。请参阅下面的代码段:

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 按钮向左滑动 under 第二个 div 以某种方式位于 tres 按钮之上屏蔽它，但也在 uno 和 dos 按钮下方，这样它们就不会在开始时被阻止。

Answer 1

问这个问题已经很久了，因此，很可能您已经找到了解决方案。但为了以防万一，这里您有一个可能的方法来实现您想要实现的目标。

而不是使用具有相同背景颜色的绝对定位的 div 来覆盖动画 li元素，为什么不使用 overflow hidden ul中的属性(property)容器？如果你这样做，ul将充当“掩码”，当 li元素在 ul 之外得到动画，它们将自动“隐藏”。看一下已经使用这种方法修改过的代码片段(我使用了两个 ul 元素来分别为 li 元素设置动画):

I saw that you placed an hr (and two div) inside the ul element and a ul should only contain li elements. For this solution, I used a pseudo-element to mimic the vertical line.

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>