refactor(animations): Vue3 transition class breaking change

empathyco · Aug 5, 2024 · 0f301c3 · 0f301c3
1 parent 77f4320
commit 0f301c3
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 13 deletions.
diff --git a/...ges/x-components/src/components/animations/animate-translate/animate-translate.style.scss b/...ges/x-components/src/components/animations/animate-translate/animate-translate.style.scss
@@ -7,21 +7,21 @@
   }
 
   &--top {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateY(-100%);
     }
   }
 
   &--bottom {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateY(100%);
     }
   }
 
   &--top-to-bottom {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateY(-100%);
     }
     &#{$p}--leave-to {
@@ -30,7 +30,7 @@
   }
 
   &--bottom-to-top {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateY(100%);
     }
     &#{$p}--leave-to {
@@ -39,21 +39,21 @@
   }
 
   &--left {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateX(-100%);
     }
   }
 
   &--right {
-    &#{$p}--enter,
+    &#{$p}--enter-from,
     &#{$p}--leave-to {
       transform: translateX(100%);
     }
   }
 
   &--left-to-right {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateX(-100%);
     }
     &#{$p}--leave-to {
@@ -62,7 +62,7 @@
   }
 
   &--right-to-left {
-    &#{$p}--enter {
+    &#{$p}--enter-from {
       transform: translateX(100%);
     }
     &#{$p}--leave-to {

diff --git a/packages/x-components/src/components/animations/animate-width.vue b/packages/x-components/src/components/animations/animate-width.vue
@@ -26,7 +26,7 @@
       overflow-x: hidden;
     }
 
-    &--enter,
+    &--enter-from,
     &--leave-to {
       width: 0 !important;
     }

diff --git a/packages/x-components/src/components/animations/cross-fade.vue b/packages/x-components/src/components/animations/cross-fade.vue
@@ -41,7 +41,7 @@
     }
 
     &--leave-to,
-    &--enter {
+    &--enter-from {
       opacity: 0;
     }
   }

diff --git a/packages/x-components/src/components/animations/fade-and-slide.vue b/packages/x-components/src/components/animations/fade-and-slide.vue
@@ -55,7 +55,7 @@
         transform $transition-transform-duration ease-out;
     }
 
-    &--enter,
+    &--enter-from,
     &--leave-to {
       transform: translate(-20%, 0);
       opacity: 0;

diff --git a/packages/x-components/src/components/animations/fade.vue b/packages/x-components/src/components/animations/fade.vue
@@ -34,7 +34,7 @@
     }
 
     &--leave-to,
-    &--enter {
+    &--enter-from {
       opacity: 0 !important;
     }
   }

diff --git a/packages/x-components/src/components/animations/staggered-fade-and-slide.vue b/packages/x-components/src/components/animations/staggered-fade-and-slide.vue
@@ -58,7 +58,7 @@
         transition: transform $transition-duration ease-out;
       }
 
-      &--enter,
+      &--enter-from,
       &--leave-to {
         transform: translate3d(0, 50%, 0);
         opacity: 0;