答案：通过CSS关键帧定义滑入滑出动画，结合JS控制类名切换实现分页过渡效果。使用@keyframes创建slideIn和slideOut动画，为页面元素添加active、slide-in、slide-out类控制显示状态，JS中通过goToPage函数触发动画并延时清除类，确保动画流畅完成，可扩展方向判断与防抖机制提升体验。
使用 CSS Animation 制作分页组件切换动画，核心是通过关键帧（@keyframes）定义元素进入和离开的动画效果，并结合类名控制当前页的显示状态。下面是一个简单实用的实现方式。
1. 基础结构与样式
先搭建分页容器和每一页的基本结构：
<div class="pagination-container"> <div class="page active" data-page="1">第一页内容</div> <div class="page" data-page="2">第二页内容</div> <div class="page" data-page="3">第三页内容</div> </div>
设置容器为相对定位，每一页绝对定位叠在一起：
.pagination-container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}
.page.active {
opacity: 1;
visibility: visible;
}
2. 定义切换动画
使用 @keyframes 创建滑入和滑出效果。比如从右向左切换：
立即学习“前端免费学习笔记（深入）”；
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(-100%);
opacity: 0;
}
}
将动画应用到 active 状态，并指定方向：
如此AI写作
112
AI驱动的内容营销平台，提供一站式的AI智能写作、管理和分发数字化工具。
112
查看详情
.page.slide-in {
animation: slideIn 0.5s ease-in-out;
}
.page.slide-out {
animation: slideOut 0.5s ease-in-out;
}
3. JavaScript 控制切换逻辑
用 JS 添加和移除动画类，实现平滑过渡：
function goToPage(pageNum) {
const pages = document.querySelectorAll('.page');
const currentPage = document.querySelector('.page.active');
const nextPage = document.querySelector(`[data-page="${pageNum}"]`);
if (!nextPage || currentPage === nextPage) return;
// 添加动画类
currentPage.classList.add('slide-out');
nextPage.classList.add('slide-in', 'active');
// 动画结束后清理类
setTimeout(() => {
currentPage.classList.remove('active', 'slide-out');
nextPage.classList.remove('slide-in');
}, 500);
}
调用 goToPage(2) 即可切换到第二页，带有滑动动画。
4. 可选：支持双向动画
如果想根据页码前后判断方向，可以动态添加 slide-left 或 slide-right 类，配合不同的 keyframes 实现左右互推效果。
基本上就这些。不复杂但容易忽略细节，比如 visibility 和 z-index 的配合，或者动画未完成时频繁点击的处理。建议加上防抖或禁用重复触发。
相关标签：
css javascript java js go ssl ai 绝对定位 overflow 相对定位 JavaScript css JS animation
本站资料仅供学习交流使用请勿商业运营，严禁从事违法，侵权等任何非法活动，否则后果自负！
THE END
暂无评论内容