laobinghu
e73f62133b
- Add advanced page/layout transitions (slide, zoom, fade with blur) - Enhance UnoCSS config with keyframes, transitions, and shortcuts - Add staggered animations for stat cards and table rows - Improve sidebar menu animations with slide-in effects - Add custom dialog/drawer transitions with bounce effects - Optimize transition timing with cubic-bezier easing Based on Element Plus transitions guide and Nuxt 4 transitions docs
118 lines
2.1 KiB
Vue
118 lines
2.1 KiB
Vue
<template>
|
|
<NuxtLoadingIndicator />
|
|
<NuxtLayout>
|
|
<NuxtPage />
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<style>
|
|
/* Page Transitions - Enhanced with multiple effects */
|
|
.page-enter-active,
|
|
.page-leave-active {
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.page-enter-from {
|
|
opacity: 0;
|
|
transform: translateY(20px) scale(0.98);
|
|
filter: blur(2px);
|
|
}
|
|
|
|
.page-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-20px) scale(1.02);
|
|
filter: blur(2px);
|
|
}
|
|
|
|
/* Slide transitions for dynamic direction */
|
|
.page-slide-left-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(50px);
|
|
}
|
|
|
|
.page-slide-left-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(-50px);
|
|
}
|
|
|
|
.page-slide-right-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(-50px);
|
|
}
|
|
|
|
.page-slide-right-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(50px);
|
|
}
|
|
|
|
/* Zoom transitions */
|
|
.page-zoom-enter-from {
|
|
opacity: 0;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.page-zoom-leave-to {
|
|
opacity: 0;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* Layout Transitions - Enhanced */
|
|
.layout-enter-active,
|
|
.layout-leave-active {
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-enter-from {
|
|
opacity: 0;
|
|
filter: grayscale(100%) brightness(0.8);
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.layout-leave-to {
|
|
opacity: 0;
|
|
filter: grayscale(100%) brightness(1.2);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Collapse transition for sidebar */
|
|
.sidebar-collapse-enter-active,
|
|
.sidebar-collapse-leave-active {
|
|
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Custom dialog/drawer transitions */
|
|
.dialog-zoom :deep(.el-dialog) {
|
|
animation: custom-zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.drawer-transition :deep(.el-drawer) {
|
|
animation: custom-slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
@keyframes custom-zoom {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.8) translateY(-20px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes custom-slide-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
</style>
|