1
0
mirror of https://github.com/donaldzou/WGDashboard.git synced 2024-11-22 07:10:09 +01:00

Adjusted some animation

This commit is contained in:
Donald Zou 2024-10-25 23:33:26 +08:00
parent bc19e3a6ff
commit 6a30cee611
3 changed files with 6 additions and 7 deletions

View File

@ -27,13 +27,14 @@ export default {
<main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0"> <main class="col-md-9 ml-sm-auto col-lg-10 px-md-4 overflow-y-scroll mb-0">
<Suspense> <Suspense>
<RouterView v-slot="{Component}"> <RouterView v-slot="{Component}">
<Transition name="fade2" mode="out-in"> <Transition name="fade2" mode="out-in" appear>
<Component :is="Component"></Component> <Component :is="Component"></Component>
</Transition> </Transition>
</RouterView> </RouterView>
</Suspense> </Suspense>
<div class="messageCentre text-body position-fixed d-flex"> <div class="messageCentre text-body position-fixed d-flex">
<TransitionGroup name="message" tag="div" class="position-relative flex-grow-1 d-flex align-items-end"> <TransitionGroup name="message" tag="div"
class="position-relative flex-sm-grow-0 flex-grow-1 d-flex align-items-end ms-sm-auto flex-column gap-2">
<Message v-for="m in getMessages.slice().reverse()" <Message v-for="m in getMessages.slice().reverse()"
:message="m" :key="m.id"></Message> :message="m" :key="m.id"></Message>
</TransitionGroup> </TransitionGroup>
@ -45,7 +46,7 @@ export default {
<style scoped> <style scoped>
.messageCentre{ .messageCentre{
top: calc(50px + 1rem); top: 1rem;
right: 1rem; right: 1rem;
width: calc(100% - 2rem); width: calc(100% - 2rem);
} }

View File

@ -26,7 +26,6 @@ export default {
}), }),
fetchGet("/api/getDashboardVersion", {}, (res) => { fetchGet("/api/getDashboardVersion", {}, (res) => {
version = res.data version = res.data
}) })
]); ]);
} }

View File

@ -1054,7 +1054,6 @@ pre.index-alert {
.fade2-enter-from{ .fade2-enter-from{
transform: translateY(-30px); transform: translateY(-30px);
/*filter: blur(3px);*/
opacity: 0; opacity: 0;
} }
@ -1081,7 +1080,7 @@ pre.index-alert {
.message-move, /* apply transition to moving elements */ .message-move, /* apply transition to moving elements */
.message-enter-active, .message-enter-active,
.message-leave-active { .message-leave-active {
transition: all 0.5s ease; transition: all 0.5s cubic-bezier(0.82, 0.58, 0.17, 1);
} }
.message-enter-from, .message-enter-from,
@ -1091,7 +1090,7 @@ pre.index-alert {
} }
.message-enter-from{ .message-enter-from{
transform: translateY(-30px) scale(0.7); transform: translateY(-30px);
} }
.message-leave-to{ .message-leave-to{