refactor: ♻️ 使用 Element-Plus 内置过渡动画替换 animate.css 动画库

This commit is contained in:
Ray.Hao
2025-01-04 23:36:58 +08:00
parent c51d3a744b
commit eda105b86f
4 changed files with 13 additions and 15 deletions

View File

@@ -49,12 +49,11 @@
"@vueuse/core": "^10.11.1", "@vueuse/core": "^10.11.1",
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "5.1.10", "@wangeditor/editor-for-vue": "5.1.10",
"animate.css": "^4.1.1",
"axios": "^1.7.9", "axios": "^1.7.9",
"codemirror": "^5.65.18", "codemirror": "^5.65.18",
"codemirror-editor-vue3": "^2.8.0", "codemirror-editor-vue3": "^2.8.0",
"echarts": "^5.5.1", "echarts": "^5.6.0",
"element-plus": "^2.9.1", "element-plus": "^2.9.2",
"exceljs": "^4.4.0", "exceljs": "^4.4.0",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
@@ -72,14 +71,14 @@
"@commitlint/config-conventional": "^19.6.0", "@commitlint/config-conventional": "^19.6.0",
"@eslint/js": "^9.17.0", "@eslint/js": "^9.17.0",
"@types/codemirror": "^5.60.15", "@types/codemirror": "^5.60.15",
"@types/lodash": "^4.17.13", "@types/lodash": "^4.17.14",
"@types/node": "^22.10.2", "@types/node": "^22.10.5",
"@types/nprogress": "^0.2.3", "@types/nprogress": "^0.2.3",
"@types/path-browserify": "^1.0.3", "@types/path-browserify": "^1.0.3",
"@types/qs": "^6.9.17", "@types/qs": "^6.9.17",
"@types/sortablejs": "^1.15.8", "@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^8.18.2", "@typescript-eslint/eslint-plugin": "^8.19.0",
"@typescript-eslint/parser": "^8.18.2", "@typescript-eslint/parser": "^8.19.0",
"@vitejs/plugin-vue": "^5.2.1", "@vitejs/plugin-vue": "^5.2.1",
"autoprefixer": "^10.4.20", "autoprefixer": "^10.4.20",
"commitizen": "^4.3.1", "commitizen": "^4.3.1",
@@ -90,12 +89,12 @@
"eslint-plugin-vue": "^9.32.0", "eslint-plugin-vue": "^9.32.0",
"globals": "^15.14.0", "globals": "^15.14.0",
"husky": "^9.1.7", "husky": "^9.1.7",
"lint-staged": "^15.2.11", "lint-staged": "^15.3.0",
"postcss": "^8.4.49", "postcss": "^8.4.49",
"postcss-html": "^1.7.0", "postcss-html": "^1.7.0",
"postcss-scss": "^4.0.9", "postcss-scss": "^4.0.9",
"prettier": "^3.4.2", "prettier": "^3.4.2",
"sass": "^1.83.0", "sass": "^1.83.1",
"stylelint": "^16.12.0", "stylelint": "^16.12.0",
"stylelint-config-html": "^1.1.0", "stylelint-config-html": "^1.1.0",
"stylelint-config-recess-order": "^5.1.1", "stylelint-config-recess-order": "^5.1.1",
@@ -104,11 +103,11 @@
"stylelint-config-standard": "^36.0.1", "stylelint-config-standard": "^36.0.1",
"terser": "^5.37.0", "terser": "^5.37.0",
"typescript": "5.5.4", "typescript": "5.5.4",
"typescript-eslint": "^8.18.2", "typescript-eslint": "^8.19.0",
"unocss": "0.65.1", "unocss": "0.65.3",
"unplugin-auto-import": "^0.18.6", "unplugin-auto-import": "^0.18.6",
"unplugin-vue-components": "^0.27.5", "unplugin-vue-components": "^0.27.5",
"vite": "^6.0.5", "vite": "^6.0.7",
"vite-plugin-mock-dev-server": "^1.8.3", "vite-plugin-mock-dev-server": "^1.8.3",
"vite-plugin-svg-icons": "^2.0.1", "vite-plugin-svg-icons": "^2.0.1",
"vue-eslint-parser": "^9.4.3", "vue-eslint-parser": "^9.4.3",

View File

@@ -1,6 +1,6 @@
<template> <template>
<el-breadcrumb class="flex-y-center"> <el-breadcrumb class="flex-y-center">
<transition-group enter-active-class="animate__animated animate__fadeInRight"> <transition-group name="el-fade-in-right">
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path"> <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
<span <span
v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1" v-if="item.redirect === 'noredirect' || index === breadcrumbs.length - 1"

View File

@@ -2,7 +2,7 @@
<section class="app-main" :style="{ height: appMainHeight }"> <section class="app-main" :style="{ height: appMainHeight }">
<router-view> <router-view>
<template #default="{ Component, route }"> <template #default="{ Component, route }">
<transition enter-active-class="animate__animated animate__fadeIn" mode="out-in"> <transition name="el-fade-in">
<keep-alive :include="cachedViews"> <keep-alive :include="cachedViews">
<component :is="Component" :key="route.path" /> <component :is="Component" :key="route.path" />
</keep-alive> </keep-alive>

View File

@@ -10,7 +10,6 @@ import "element-plus/theme-chalk/dark/css-vars.css";
import "@/styles/dark/css-vars.css"; import "@/styles/dark/css-vars.css";
import "@/styles/index.scss"; import "@/styles/index.scss";
import "uno.css"; import "uno.css";
import "animate.css";
const app = createApp(App); const app = createApp(App);
// 注册插件 // 注册插件