😎修复页面动画样式对应

2025-08-02 03:30:33 +08:00 · 2025-08-02 03:30:33 +08:00 · 5653b52703
commit 5653b52703
parent 559115c9d6
2 changed files with 187 additions and 27 deletions
--- a/Web/src/theme/common/transition.scss
+++ b/Web/src/theme/common/transition.scss
@ -1,103 +1,264 @@
 /* 自定义页面切换动画
 ------------------------------- */
-.fade-enter-active{
+.bounce-enter-active {
+	animation: bounce;
+	animation-duration: 0.3s;
+}
+.flash-enter-active {
+	animation: flash;
+	animation-duration: 0.3s;
+}
+.rubberBand-enter-active {
+	animation: rubberBand;
+	animation-duration: 0.3s;
+}
+.bounceIn-enter-active {
+	animation: bounceIn;
+	animation-duration: 0.3s;
+}
+.shakeX-enter-active {
+	animation: shakeX;
+	animation-duration: 0.3s;
+}
+.shakeY-enter-active {
+	animation: shakeY;
+	animation-duration: 0.3s;
+}
+.tada-enter-active {
+	animation: tada;
+	animation-duration: 0.3s;
+}
+.swing-enter-active {
+	animation: swing;
+	animation-duration: 0.3s;
+}
+.wobble-enter-active {
+	animation: wobble;
+	animation-duration: 0.3s;
+}
+.jello-enter-active {
+	animation: jello;
+	animation-duration: 0.3s;
+}
+.bounceInDown-enter-active {
+	animation: bounceInDown;
+	animation-duration: 0.3s;
+}
+.bounceInRight-enter-active {
+	animation: bounceInRight;
+	animation-duration: 0.3s;
+}
+.bounceInRight-enter-active {
+	animation: bounceInRight;
+	animation-duration: 0.3s;
+}
+.bounceInUp-enter-active {
+	animation: bounceInUp;
+	animation-duration: 0.3s;
+}
+.fadeIn-enter-active {
 	animation: fadeIn;
 	animation-duration: 0.3s;
 }
-.fadeUp-enter-active{
+.fadeInUp-enter-active {
 	animation: fadeInUp;
 	animation-duration: 0.3s;
 }
-.fadeDown-enter-active{
+.fadeInDown-enter-active {
 	animation: fadeInDown;
 	animation-duration: 0.3s;
 }
-.fadeLeft-enter-active{
+.fadeInLeft-enter-active {
 	animation: fadeInLeft;
 	animation-duration: 0.3s;
 }
-.fadeRight-enter-active{
+.fadeInTopLeft-enter-active {
+	animation: fadeInTopLeft;
+	animation-duration: 0.3s;
+}
+.fadeInTopRight-enter-active {
+	animation: fadeInTopRight;
+	animation-duration: 0.3s;
+}
+.fadeInBottomLeft-enter-active {
+	animation: fadeInBottomLeft;
+	animation-duration: 0.3s;
+}
+.fadeInBottomRight-enter-active {
+	animation: fadeInBottomRight;
+	animation-duration: 0.3s;
+}
+.fadeInUpBig-enter-active {
+	animation: fadeInUpBig;
+	animation-duration: 0.3s;
+}
+.fadeInDownBig-enter-active {
+	animation: fadeInDownBig;
+	animation-duration: 0.3s;
+}
+.fadeInRightBig-enter-active {
+	animation: fadeInRightBig;
+	animation-duration: 0.3s;
+}
+.fadeInLeftBig-enter-active {
+	animation: fadeInLeftBig;
+	animation-duration: 0.3s;
+}
+.lightSpeedInRight-enter-active {
+	animation: lightSpeedInRight;
+	animation-duration: 0.3s;
+}
+.lightSpeedInLeft-enter-active {
+	animation: lightSpeedInLeft;
+	animation-duration: 0.3s;
+}
+.zoomIn-enter-active {
+	animation: zoomIn;
+	animation-duration: 0.3s;
+}
+.zoomInLeft-enter-active {
+	animation: zoomInLeft;
+	animation-duration: 0.3s;
+}
+.zoomInRight-enter-active {
+	animation: zoomInRight;
+	animation-duration: 0.3s;
+}
+.zoomInDown-enter-active {
+	animation: zoomInDown;
+	animation-duration: 0.3s;
+}
+.zoomInUp-enter-active {
+	animation: zoomInUp;
+	animation-duration: 0.3s;
+}
+.rotateIn-enter-active {
+	animation: rotateIn;
+	animation-duration: 0.3s;
+}
+.flipInY-enter-active {
+	animation: fadflipInYeIn;
+	animation-duration: 0.3s;
+}
+.rotateInDownLeft-enter-active {
+	animation: rotateInDownLeft;
+	animation-duration: 0.3s;
+}
+.rotateInDownRight-enter-active {
+	animation: rotateInDownRight;
+	animation-duration: 0.3s;
+}
+.rotateInUpLeft-enter-active {
+	animation: rotateInUpLeft;
+	animation-duration: 0.3s;
+}
+.fade-enter-active {
+	animation: rotateInUpRight;
+	animation-duration: 0.3s;
+}
+.rotateInUpRight-enter-active {
+	animation: fadeIn;
+	animation-duration: 0.3s;
+}
+
+.fade-enter-active {
+	animation: fadeIn;
+	animation-duration: 0.3s;
+}
+.fadeUp-enter-active {
+	animation: fadeInUp;
+	animation-duration: 0.3s;
+}
+.fadeDown-enter-active {
+	animation: fadeInDown;
+	animation-duration: 0.3s;
+}
+.fadeLeft-enter-active {
+	animation: fadeInLeft;
+	animation-duration: 0.3s;
+}
+.fadeRight-enter-active {
 	animation: fadeInRight;
 	animation-duration: 0.3s;
 }

-.lightSpeedLeft-enter-active{
+.lightSpeedLeft-enter-active {
 	animation: lightSpeedInLeft;
 	animation-duration: 0.3s;
 }
-.lightSpeedRight-enter-active{
+.lightSpeedRight-enter-active {
 	animation: lightSpeedInRight;
 	animation-duration: 0.3s;
 }

-.zoom-enter-active{
+.zoom-enter-active {
 	animation: zoomIn;
 	animation-duration: 0.3s;
 }
-.zoomUp-enter-active{
+.zoomUp-enter-active {
 	animation: zoomInUp;
 	animation-duration: 0.3s;
 }
-.zoomDown-enter-active{
+.zoomDown-enter-active {
 	animation: zoomInDown;
 	animation-duration: 0.3s;
 }
-.zoomLeft-enter-active{
+.zoomLeft-enter-active {
 	animation: zoomInLeft;
 	animation-duration: 0.3s;
 }
-.zoomRight-enter-active{
+.zoomRight-enter-active {
 	animation: zoomInRight;
 	animation-duration: 0.3s;
 }

-.flip-enter-active{
+.flip-enter-active {
 	animation: flip;
 	animation-duration: 0.3s;
 }
-.flipX-enter-active{
+.flipX-enter-active {
 	animation: flipInX;
 	animation-duration: 0.3s;
 }
-.flipY-enter-active{
+.flipY-enter-active {
 	animation: flipInY;
 	animation-duration: 0.3s;
 }

-.backUp-enter-active{
+.backUp-enter-active {
 	animation: backInUp;
 	animation-duration: 0.3s;
 }
-.backDown-enter-active{
+.backDown-enter-active {
 	animation: backInDown;
 	animation-duration: 0.3s;
 }
-.backLeft-enter-active{
+.backLeft-enter-active {
 	animation: backInLeft;
 	animation-duration: 0.3s;
 }
-.backRight-enter-active{
+.backRight-enter-active {
 	animation: backInRight;
 	animation-duration: 0.3s;
 }

-.bounce-enter-active{
+.bounce-enter-active {
 	animation: bounceIn;
 	animation-duration: 0.3s;
 }
-.bounceUp-enter-active{
+.bounceUp-enter-active {
 	animation: bounceInUp;
 	animation-duration: 0.3s;
 }
-.bounceDown-enter-active{
+.bounceDown-enter-active {
 	animation: bounceInDown;
 	animation-duration: 0.3s;
 }
-.bounceLeft-enter-active{
+.bounceLeft-enter-active {
 	animation: bounceInLeft;
 	animation-duration: 0.3s;
 }
-.bounceRight-enter-active{
+.bounceRight-enter-active {
 	animation: bounceInRight;
 	animation-duration: 0.3s;
 }
@ -112,7 +273,6 @@
 // 	animation-duration: 0.3s;
 // }

-
 /* 页面切换动画
 ------------------------------- */
 .slide-right-enter-active,
--- a/Web/src/views/system/infoSetting/component/transform.vue
+++ b/Web/src/views/system/infoSetting/component/transform.vue
@ -41,8 +41,7 @@ const state = reactive({
 	idx: 999,
 	isShowDialog: false,
 	animateLidt: [
-		{ name: 'animate__bounce', isShow: true, value: 'bounce', label: '弹跳' },
-		{ name: 'animate__fadeIn', isShow: true, value: 'fadeIn', label: '渐显' },
+		{ name: 'animate__bounce', isShow: true, value: 'bounce', label: '弹跳' },		
 		{ name: 'animate__flash', isShow: true, value: 'flash', label: '闪烁' },
 		{ name: 'animate__rubberBand', isShow: true, value: 'rubberBand', label: '拉伸带' },
 		{ name: 'animate__bounceIn', isShow: true, value: 'bounceIn', label: '弹簧' },
@ -56,6 +55,7 @@ const state = reactive({
 		{ name: 'animate__bounceInRight', isShow: true, value: 'bounceInRight', label: '向左弹入' },
 		{ name: 'animate__bounceInLeft', isShow: true, value: 'bounceInRight', label: '向右弹入' },
 		{ name: 'animate__bounceInUp', isShow: true, value: 'bounceInUp', label: '向上弹入' },
+		{ name: 'animate__fadeIn', isShow: true, value: 'fadeIn', label: '渐显' },
 		{ name: 'animate__fadeInUp', isShow: true, value: 'fadeInUp', label: '向上进入' },
 		{ name: 'animate__fadeInDown', isShow: true, value: 'fadeInDown', label: '向下进入' },
 		{ name: 'animate__fadeInRight', isShow: true, value: 'fadeInLeft', label: '向右进入' },