Section Overlapping Transition Animation

Question

I Have Section Overlapping Like This.

 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>

If I Click One Button The Section Is Just Overlapping and I Do Not Need This Just Happen.I need to add the Animation part, one section into another section And I have no idea how to do this. If You Can Help with this my problem, I am so thankful About That. Thank You..!

Example - https://animista.net/play/basic/flip-scale/flip-scale-up-ver I need to add animation like this when my section is overlapping

Answer 1

You can add a class with the animations on click.

 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>