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

Question

我有一个CSS 动画效果，由于分层 问题而难以实现。请参阅下面的 sn-p：

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 下方，该div 的颜色与背景相匹配。我需要 tres 按钮向左滑动 under 第二个 div 以某种方式位于 tres 按钮的顶部以掩盖它，但也在 uno 和 dos 按钮的下方，所以他们一开始并没有被阻止。

Answer 1

自从提出这个问题以来已经有很长时间了，因此，您很可能已经找到了解决方案。但以防万一，在这里您可以通过一种可能的方法来实现您想要实现的目标。

为什么不在ul容器中使用overflowhidden属性，而不是使用具有相同背景颜色的绝对定位的div来覆盖动画li元素？如果这样做，ul 将充当“掩码”，当li 元素在ul 之外进行动画处理时，它们将自动“隐藏”。看看您已经使用这种方法修改的 sn-p（我使用了两个 ul 元素分别为 li 元素设置动画）：

我看到您在 ul 元素和 ul should only contain li elements 中放置了一个 hr（和两个 div）。对于这个解决方案，我使用了一个伪元素来模拟垂直线。

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>