修复HTML/CSS/JS双页面切换动画出现的跳帧抖动问题

问题原因 #

• 动画过程中两个页面层级未明确，z-index仅在动画最后一帧更新，过程中层级错乱会导致页面突然跳转显示
• 未开启GPU硬件加速，浏览器软渲染transform动画时容易出现卡顿
• 未限制重复点击，动画未完成时重复触发会导致状态错乱

修复方案 #

调整CSS和JS代码，明确层级切换逻辑、开启硬件加速、增加点击锁避免重复触发：

修改后CSS代码 #

*,
*::after,
*::before{
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

section#pg_one{
    display: grid;
    align-items: center;
    justify-items: center;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #5944f0;
    z-index: 1;
    /* 触发硬件加速 */
    transform: translateZ(0);
    will-change: transform, z-index;
}

.pg_one{
    animation-name: p1off;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes p1off {
    0%{
        transform: translateX(0);
        z-index: 0;
    }
    50%{
        transform: translateX(-100vw);
        z-index: 0;
    }
    100%{
        transform: translateX(0);
        z-index: 2;
    }
}

section#pg_two{
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
    background-color: #d0277f;
    z-index: 2;
    /* 触发硬件加速 */
    transform: translateZ(0);
    will-change: transform, z-index;
}

.pg_two{
    animation-name: p2off;
    -webkit-animation-duration: 1000ms;
    animation-duration: 1000ms;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes p2off {
    0%{
        transform: translateX(0);
        z-index: 0;
    }
    50%{
        transform: translateX(100vw);
        z-index: 0;
    }
    100%{
        transform: translateX(0);
        z-index: 2;
    }
}

修改后JS代码 #

var pg_one = document.getElementById("pg_one");
var pg_two = document.getElementById("pg_two");
// 点击锁，避免动画未完成重复触发
let isAnimating = false;

pg_one.onclick=()=>{
    if(isAnimating) return;
    isAnimating = true;
    pg_two.className = "pg_two";
    pg_one.className = "";
    // 动画结束后重置锁和层级
    setTimeout(()=>{
        pg_one.style.zIndex = '1';
        isAnimating = false;
    },1000)
}
pg_two.onclick=()=>{
    if(isAnimating) return;
    isAnimating = true;
    pg_one.className = "pg_one";
    pg_two.className = "";
    // 动画结束后重置锁和层级
    setTimeout(()=>{
        pg_two.style.zIndex = '1';
        isAnimating = false;
    },1000)
}

HTML代码 #

无需调整，保持原有代码即可。

内容的提问来源于stack exchange，提问作者user17241381