2、定义@keyframes slide-up-fade { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100vh); opacity: 0; } }。
3、声明.slide-clear { animation: slide-up-fade 0.6s ease-out forwards; }。
4、执行document.getElementById('main-content').classList.add('slide-clear');启动动画。
四、使用Canvas全屏覆盖清屏
该方法不操作原有DOM，而是动态创建全屏canvas，绘制渐变遮罩并逐帧降低不透明度，形成覆盖式清屏动画。
1、在页面末尾插入。
2、获取canvas上下文ctx = document.getElementById('clear-canvas').getContext('2d');。
3、定义drawOverlay(alpha)函数，用ctx.fillStyle = `rgba(0,0,0,${alpha})`填充全画布。
4、使用requestAnimationFrame递减alpha值（如从0.0到1.0），当alpha达1.0时清屏完成，可重置页面或跳转。
五、使用SVG mask动画清屏
该方法借助SVG的mask元素定义圆形扩散遮罩，配合CSS动画实现从中心向四周“吞噬”内容的清屏效果。
1、在HTML中添加隐藏的svg>，内含
2、为body或主容器设置style="mask: url(#clear-mask); -webkit-mask: url(#clear-mask);"。
3、定义.mask-animation { animation: mask-expand 0.7s forwards; }，其中@keyframes mask-expand { to { r: 2000; } }。
4、触发时为circle元素添加.mask-animation类，注意需预先设置circle的cx/cy为视口中心坐标。
963
收藏
