Question

我一直在尝试制作以下动画：

（1）我有一个按钮，其中包括一个100x100黑色白色框，一个黑色100x100黑色框。

（2）单击按钮，使白框消失为黑框。（请参见结果here）

source

（3）我一直未尝试做的是，当单击时也使黑框消失在白框中。

所以：

单击白框使其消失在黑框中
单击黑框使其消失在白框中
单击白框使其消失在黑框中
以此类推...

我的想法是通过使用实用程序类u-on-top和u-at-bottom修改单击框时的z-index来获得效果（例如，黑框位于白框消失），但是我得到了一些奇怪的结果。

Answer 1

您可以尝试调整一些过渡，技巧是为z-index添加一个延迟，以便在缩放效果后改变。我还更改了JS代码并减少了CSS：

var btnW = document.querySelector(".white");
var btnB = document.querySelector(".black");
var btnState = false;

btnW.addEventListener("click", () => {
  btnB.classList.remove('hide');
  btnW.classList.add('hide');
  btnW.classList.remove('u-on-top');
  btnB.classList.add('u-on-top');
})
btnB.addEventListener("click", () => {
  btnW.classList.remove('hide');
  btnB.classList.add('hide');
  btnB.classList.remove('u-on-top');
  btnW.classList.add('u-on-top');
})

.button {
  width: 100px;
  height: 100px;
  margin: 10px;
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.button>div {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
  position: absolute;
  transition: transform 0s, z-index 0s 0.5s;
  z-index:0;
}

.button .white {
  background: #fff;
}

.button .black {
  background: #000;
}
.button>div.hide {
  transform:scale(0);
  transition: transform .5s, z-index 0s 0.5s;
}
.button>div.u-on-top {
  z-index:1;
}

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

单击时使两个重叠的框彼此消失

1 个答案: