Javascript 使两个重叠的框在单击时相互消失

我一直在尝试创建以下动画：

1我有一个按钮，由一个白色100x100盒子和一个黑色100x100盒子组成

2点击按钮使白框消失在黑框中。 看到结果了吗

3我一直试图做的是在点击时让黑框消失在白框中，但没有成功

因此：

点击白框使其消失在黑框中

点击黑框使其消失在白框中

点击白框使其消失在黑框中

等等

---

我的想法是通过点击时修改框的z索引来获得效果，使用实用程序类u-on-top和u-at-bottom，例如在白框消失后，黑框被带到顶部，但我得到了一些奇怪的结果。

您可以尝试调整一些过渡，诀窍是在z索引中添加延迟，以便在缩放效果后更改。我还更改了JS代码并减少了CSS：

var btnW=document.querySelector.white； var btnB=document.querySelector.black； var btnState=false； btnW.addEventListenerclick，=>{ 类列表。删除“隐藏”； 添加'hide'； btnW.classList.删除'u-on-top'； btnB.classList.添加“u-on-top”； } btnB.addEventListenerclick，=>{ 类列表。删除“隐藏”； btnB.classList.add'hide'； btnB.classList.删除“u-on-top”； btnW.classList.添加'u-on-top'； } .按钮{ 宽度：100px； 高度：100px； 利润率：10px； 位置：相对位置； 显示：内联块； 光标：指针； } .按钮>div{ 宽度：100%； 身高：100%； 边框：1px000； 位置：绝对位置； 转换：转换0s，z指数0s 0.5s； z指数：0； } .按钮.白色{ 背景：fff； } .按钮，黑色{ 背景：2000人； } .按钮>分区隐藏{ 变换：scale0； 转变：转变.5s，z指数0s0.5s； } .按钮>顶部u形分区{ z指数：1； }

---

您知道CSS中的错误吗？在当前编写时，.white规则嵌套在.button.Err的规则中。困惑的是，您链接到的示例在第一次单击时白色消失为黑色，然后在第二次单击时黑色消失为白色。这不回答你的问题吗？还是我错过了什么？@David Thomas，我用了SCSS筑巢。@barny，白色的盒子变小了，消失在黑色的盒子里。但是，点击后框并不会使黑框变小，而是将白框放大到原来的大小。非常感谢！你真棒

// html
<div class="button">
  <div class="white u-on-top"></div>
  <div class="black"></div>
</div>

// css
.button {
  width: 100px;
  height: 100px;
  margin: 10px;
  position: relative;
  display: inline-block;  

 .white {
   width: 100%;
   height: 100%;    
   background: #fff;
   border: 1px solid #000;

   position: absolute;    

   transition: .5s;    
  }
 .black {
   width: 100%;
   height: 100%;
   background: #000;
   border: 1px solid #000;
  }
}

.u-on-top {
  z-index: 1;
}
.u-at-bottom {
  z-index: -1;
}

// javascript
var btn = document.querySelector(".button");
var btnState = false;

btn.addEventListener("click", () => {
  var btnw = btn.querySelector(".white");
  if (!btnState) {
    btnw.style.transform = "scale(0)";
    btnState = true;
  } else {
    btnw.style.transform = "scale(1)";
    btnState = false;
  }
})