大佬教程收集整理的这篇文章主要介绍了部分重叠过渡动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有这样重叠的部分。
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 当我的部分重叠时，我需要添加这样的动画
您可以添加带有点击动画的类。
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>
以上是大佬教程为你收集整理的部分重叠过渡动画全部内容，希望文章能够帮你解决部分重叠过渡动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。