Question

由于分层问题，我的CSS动画效果很难实现。请参阅下面的代码：

＆＃13;

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

＆＃13;

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; }

＆＃13;

<head>
  <style>
    html, 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 }/* <<clearfix */
   </style>
</head>
<body>
  <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>
</body>

＆＃13;

＆＃34; + ＆＃34;单击按钮我的目标是制作＆＃34; tres＆＃34;按钮滑动到左侧，同时被屏蔽，就像＆＃34; uno＆＃34;和＆＃34; dos＆＃34;按钮，除了相反的方向。这似乎是不可能的，因为无论z-index我给任何元素都没有办法让左面具在正确的元素之上，同时让正确的面具完成它的工作。有没有简单的方法可以在没有jquery的情况下做到这一点？感谢。

澄清：＆＃34; Uno＆＃34;和＆＃34; Dos＆＃34;按钮目前正在＆＃34; 下＆＃34;一个颜色与背景匹配的div。我需要＆＃34; tres＆＃34;按钮向左滑动＆＃34;在＆＃34;第二个div在某种程度上位于＆＃34; tres＆＃34;按钮来掩盖它，但也低于＆＃34; uno＆＃34;和＆＃34; dos＆＃34;按钮，因此它们不会被阻止开始。

Answer 1

自从这个问题问了很长时间以来，很可能您已经找到了解决方案。但是以防万一，这里您可以采用一种可行的方法来实现自己的目标。

为什么不使用具有相同背景颜色的绝对位置的div来覆盖动画的li元素，为什么不在{{1}中使用overflow hidden属性} 容器？如果执行此操作，ul将充当“蒙版”，并且当ul元素在li之外进行动画处理时，它们将被自动“隐藏”。看看已经使用此方法修改过的代码段（我使用了两个ul元素分别为ul元素设置动画）

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

ul

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%);
}

在一行

1 个答案: