Element Plus高级-第六篇：组件交互与动画高级技巧

### 实现Element Plus分页组件中的换页动画 为了在Element Plus的`el-pagination`组件中实现换页动画效果，可以通过结合Vue.js的过渡特性来完成。具体来说，在切换页面时动态改变显示的内容，并利用CSS Transition或Animation属性创建平滑过渡。 #### 使用v-if控制内容展示并应用过渡组 当用户点击不同的页码时，先隐藏旧的数据列表再加载新的数据项，期间使用`<transition>`标签包裹要变化的部分以触发视觉上的转换效果： ```html <!-- HTML部分 --> <div id="app"> <!-- 这里是模拟的数据容器 --> <ul> <transition-group name="fade" tag="div"> <li v-for="(item, index) in currentPageData" :key="index">{{ item }}</li> </transition-group> </ul> <!-- 分页器 --> <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next" :total="totalItems"></el-pagination> </div> ``` ```css /* CSS部分 */ .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter-from, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } ``` ```javascript // JavaScript (Vue实例配置) new Vue({ el: '#app', data() { return { allData: [], // 所有数据源 pageSize: 10, // 每页大小 totalItems: 0, // 总记录数 currentPageIndex: 1 // 当前页索引，默认第一页 } }, computed: { currentPageData() { // 计算当前页应该渲染的数据子集 const start = this.pageSize * (this.currentPageIndex - 1); const end = start + this.pageSize; return this.allData.slice(start, end); } }, methods: { handleCurrentChange(val) { // 处理翻页逻辑 console.log(`当前页: ${val}`); this.currentPageIndex = val; // 如果是从服务器获取新数据，则在此处发起请求更新allData数组 // 并设置总条目数量 // axios.get('/api/data?page=' + val).then(response => { // this.allData = response.data.items; // this.totalItems = response.data.totalCount; // }); // 此处仅做本地示例，实际项目应按需调整 } } }) ``` 上述代码片段展示了如何基于用户的交互操作（即更改当前页），通过计算属性重新筛选出对应范围内的数据显示出来的同时施加淡入淡出的效果[^1]。