javascript - 部分重叠过渡动画

Question

我有这样的部分重叠。

function forPageOne() {
  document.getElementById('home').style.zIndex = 200;
  document.getElementById('about').style.zIndex = -200;
}

function forPageTwo() {
  document.getElementById('home').style.zIndex = -200;
  document.getElementById('about').style.zIndex = 200;
}

<section
  style="
    position: absolute;
    width: 60vh;
    height: 60vh;
    background-color: #144ddc;
    left: 300px;
  "
  class="page1 home"
  id="home"
></section>

<section
  style="
    position: absolute;
    width: 60vh;
    height: 60vh;
    background-color: #dcc114;
    left: 300px;
  "
  class="page2 about"
  id="about"
></section>

<button onclick="forPageOne()">For Page One</button>
<button onclick="forPageTwo()">For Page Two</button>

如果我单击一个按钮，该部分只是重叠，我不需要这只是发生。我需要添加动画部分，一个部分到另一个部分，我不知道如何做到这一点。如果你能帮助解决我的问题，我非常感谢。谢谢你..！

示例 - https://animista.net/play/basic/flip-scale/flip-scale-up-ver 当我的部分重叠时，我需要添加这样的动画

标签： javascripthtml

Answer 1

您可以在单击时添加带有动画的类。

const page1 = document.getElementById('home');
const page2 = document.getElementById('about');

function forPageOne() {
  page1.style.zIndex = 200;
  page2.style.zIndex = -200;

  page1.classList.add("animated");
  page2.classList.remove("animated");
}

function forPageTwo() {
  page1.style.zIndex = -200;
  page2.style.zIndex = 200;

  page1.classList.remove("animated");
  page2.classList.add("animated");
}

@-webkit-keyframes flip-scale-up-ver {
  0% {
    -webkit-transform: scale(1) rotateY(0);
    transform: scale(1) rotateY(0);
  }
  50% {
    -webkit-transform: scale(2.5) rotateY(90deg);
    transform: scale(2.5) rotateY(90deg);
  }
  100% {
    -webkit-transform: scale(1) rotateY(180deg);
    transform: scale(1) rotateY(180deg);
  }
}

@keyframes flip-scale-up-ver {
  0% {
    -webkit-transform: scale(1) rotateY(0);
    transform: scale(1) rotateY(0);
  }
  50% {
    -webkit-transform: scale(2.5) rotateY(90deg);
    transform: scale(2.5) rotateY(90deg);
  }
  100% {
    -webkit-transform: scale(1) rotateY(180deg);
    transform: scale(1) rotateY(180deg);
  }
}

.animated {
  -webkit-animation: flip-scale-up-ver 0.5s linear both;
  animation: flip-scale-up-ver 0.5s linear both;
}

<section style="
    position: absolute;
    width: 60vh;
    height: 60vh;
    background-color: #144ddc;
    left: 300px;
  " class="page1 home" id="home"></section>

<section style="
    position: absolute;
    width: 60vh;
    height: 60vh;
    background-color: #dcc114;
    left: 300px;
  " class="page2 about" id="about"></section>

<button onclick="forPageOne()">For Page One</button>
<button onclick="forPageTwo()">For Page Two</button>