vue切换组件动画 / vue-transition过渡动画

Posted 2023-04-16

参考技术A 文档: https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E8%BF%87%E6%B8%A1
transition标签包裹router-view or 状态切换的标签 才能实现过度动效!!!

v-enter / v-leave: 进入/离开过度的开始状态;
v-enter-to / v-leave-to: 进度/离开过度的结束状态;
v-enter-active / v-leave-active: 进入/离开过度时的生效状态;

提供了以上6个类名 or 使用name自定义transition

app.vue中设置页面切换全局动画

style

ui框架组件中的过渡动画卡顿

使用的ui框架

antd-vue

问题描述

菜单切换卡顿
tabs切换卡顿
radio-group切换卡顿

问题排查

接口数量
接口返回数据量
接口返回时间

从以上三个角度排查发现
数据数量和接口返回数据量越多，越卡顿成正相关
同时发现接口返回时间也会影响ui组件卡顿