😎修复页面动画样式对应

Web/src/theme/common/transition.scss

@@ -1,5 +1,166 @@
 /* 自定义页面切换动画
 ------------------------------- */
+.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;
+}
+.fadeInUp-enter-active {
+	animation: fadeInUp;
+	animation-duration: 0.3s;
+}
+.fadeInDown-enter-active {
+	animation: fadeInDown;
+	animation-duration: 0.3s;
+}
+.fadeInLeft-enter-active {
+	animation: fadeInLeft;
+	animation-duration: 0.3s;
+}
+.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;
@@ -112,7 +273,6 @@
 // 	animation-duration: 0.3s;
 // }
 
-
 /* 页面切换动画
 ------------------------------- */
 .slide-right-enter-active,

Web/src/views/system/infoSetting/component/transform.vue

@@ -42,7 +42,6 @@ const state = reactive({
 	isShowDialog: false,
 	animateLidt: [
 		{ name: 'animate__bounce', isShow: true, value: 'bounce', label: '弹跳' },		
-		{ name: 'animate__fadeIn', isShow: true, value: 'fadeIn', 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: '向右进入' },