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:
parent
bc19e3a6ff
commit
6a30cee611
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -26,7 +26,6 @@ export default {
|
|||||||
}),
|
}),
|
||||||
fetchGet("/api/getDashboardVersion", {}, (res) => {
|
fetchGet("/api/getDashboardVersion", {}, (res) => {
|
||||||
version = res.data
|
version = res.data
|
||||||
|
|
||||||
})
|
})
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
@ -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{
|
||||||
|
Loading…
Reference in New Issue
Block a user