diff --git a/package-lock.json b/package-lock.json index 386ad3e..b6e0bf1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "github-calendar": "^2.3.4", "js-yaml": "^4.1.0", "vue": "^3.5.13", + "vue-page-transition": "^0.2.2", "vue-router": "^4.5.0", "yaml": "^2.7.0" }, @@ -1909,6 +1910,12 @@ } } }, + "node_modules/vue-page-transition": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/vue-page-transition/-/vue-page-transition-0.2.2.tgz", + "integrity": "sha512-qOx+llJ28XX0VwJNJ4GVaeNBPRmPMZac2QQgrIHVUhpXyJx2CQ2XvoQOpGD1ge7QMY3PjZ6fwTbdBwZkA3I9qA==", + "license": "MIT" + }, "node_modules/vue-router": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz", diff --git a/package.json b/package.json index 3801a24..5cf9b1d 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "github-calendar": "^2.3.4", "js-yaml": "^4.1.0", "vue": "^3.5.13", + "vue-page-transition": "^0.2.2", "vue-router": "^4.5.0", "yaml": "^2.7.0" }, diff --git a/src/App.vue b/src/App.vue index 70f5871..2c381b7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -6,8 +6,10 @@ import AppFooter from "./components/AppFooter.vue"; @@ -27,4 +29,14 @@ html, body { .main-content { flex: 1; /* 占据剩余空间 */ } + +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.5s ease; +} + +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue index dbde3d8..0c8e87b 100644 --- a/src/components/AppFooter.vue +++ b/src/components/AppFooter.vue @@ -2,6 +2,7 @@