From 69ef3af0927e5cf2e283326e86bc134f8999a477 Mon Sep 17 00:00:00 2001
From: "ala'n (Alexey Stsefanovich)" <astsefanovich@exadel.com>
Date: Mon, 26 Jun 2023 23:23:49 +0200
Subject: [PATCH] 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`
---
 src/modules/esl-animate/README.md             |  8 +--
 .../core/esl-animate-animations.less          | 50 ++++++++-----------
 2 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/src/modules/esl-animate/README.md b/src/modules/esl-animate/README.md
index 1bee02f36..f54fe1fd2 100644
--- 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
index 44c0e8302..b1e9c780f 100644
--- 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;
   }
 }