refactor(esl-animate): rework default animation classes

BREAKING CHANGE: default esl-animate module class `esl-animate-slide-up` replaced with `esl-animate-slide up` BREAKING CHANGE: default esl-animate module class `esl-animate-slide-down` replaced with `esl-animate-slide down` BREAKING CHANGE: default esl-animate module class `esl-animate-slide-left` replaced with `esl-animate-slide left` BREAKING CHANGE: default esl-animate module class `esl-animate-slide-right` replaced with `esl-animate-slide right`
exadel-inc · Jun 26, 2023 · 69ef3af · 69ef3af
1 parent 2000e04
commit 69ef3af
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 33 deletions.
diff --git a/src/modules/esl-animate/README.md b/src/modules/esl-animate/README.md
@@ -18,10 +18,10 @@ animated.
 - Automatic re-animation after the item exits the viewport area
 - Pre-defined CSS animations
   - `esl-animate-fade`
-  - `esl-animate-slide-left`
-  - `esl-animate-slide-right`
-  - `esl-animate-slide-up`
-  - `esl-animate-slide-down`
+  - `esl-animate-slide left`
+  - `esl-animate-slide right`
+  - `esl-animate-slide up`
+  - `esl-animate-slide down`
 
 ## `ESLAnimateService`
 

diff --git a/src/modules/esl-animate/core/esl-animate-animations.less b/src/modules/esl-animate/core/esl-animate-animations.less
@@ -6,42 +6,34 @@
   }
 }
 
-.esl-animate-slide-left {
-  opacity: 0;
-  transform: translateX(-30px);
-  &.in {
-    opacity: 1;
-    transform: translateX(0px);
-    transition: transform 1s, opacity 1s;
-  }
-}
+.esl-animate-slide {
+  --esl-animation-offset-x: 0;
+  --esl-animation-offset-y: 0;
 
-.esl-animate-slide-right {
   opacity: 0;
-  transform: translateX(30px);
-  &.in {
-    opacity: 1;
-    transform: translateX(0px);
-    transition: transform 1s, opacity 1s;
-  }
-}
+  transform: translate3d(var(--esl-animation-offset-x), var(--esl-animation-offset-y), 0);
 
-.esl-animate-slide-up {
-  opacity: 0;
-  transform: translateY(30px);
   &.in {
     opacity: 1;
-    transform: translateY(0px);
+    transform: translate3d(0px, 0px, 0px);
     transition: transform 1s, opacity 1s;
   }
-}
+  &:not(.in) {
+    position: relative;
+    top: calc(~'-1 * var(--esl-animation-offset-y)');
+    left: calc(~'-1 * var(--esl-animation-offset-x)');
+  }
 
-.esl-animate-slide-down {
-  opacity: 0;
-  transform: translateY(-30px);
-  &.in {
-    opacity: 1;
-    transform: translateY(0px);
-    transition: transform 1s, opacity 1s;
+  &.up {
+    --esl-animation-offset-y: 30px;
+  }
+  &.down {
+    --esl-animation-offset-y: -30px;
+  }
+  &.left {
+    --esl-animation-offset-x: 30px;
+  }
+  &.right {
+    --esl-animation-offset-x: -30px;
   }
 }