From 2e1c0ae77a17b48981da38d258054e5c13cae37d Mon Sep 17 00:00:00 2001
From: Ilya <41614937+s-r-x@users.noreply.github.com>
Date: Fri, 18 Jun 2021 11:26:27 +0500
Subject: [PATCH] fix: janky sidebar animation (#1726)

---
 assets/scss/styles.scss            |  8 ++++---
 components/translate/SlideLeft.vue | 35 ++++++++++++++++++++----------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 9a5ae70fe..493d6d8d5 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -727,11 +727,13 @@ section {
 }
 
 .inner-right {
+  --width: 33%;
+  --ml: 1rem;
   @apply flex;
   @apply order-2;
-  @apply ml-4;
 
-  width: 33%;
+  margin-left: var(--ml);
+  width: var(--width);
 }
 
 @media (max-width: $responsiveWidth) {
@@ -770,7 +772,7 @@ section {
   }
 
   .inner-right {
-    @apply ml-0;
+    --ml: 0;
   }
 
   .toasted-container {
diff --git a/components/translate/SlideLeft.vue b/components/translate/SlideLeft.vue
index e44a369c9..e4b5511c1 100644
--- a/components/translate/SlideLeft.vue
+++ b/components/translate/SlideLeft.vue
@@ -1,18 +1,8 @@
 <template>
-  <transition
-    :appear="appear"
-    name="translate-slide-left"
-    enter-active-class="transition duration-500 transform"
-    enter-class="translate-x-full"
-    enter-to-class="translate-x-0"
-    leave-active-class="transition duration-500 transform"
-    leave-class="translate-x-0"
-    leave-to-class="translate-x-full"
-  >
+  <transition :appear="appear" name="translate-slide-left">
     <slot></slot>
   </transition>
 </template>
-
 <script>
 export default {
   props: {
@@ -23,3 +13,26 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+.translate-slide-left {
+  &-enter,
+  &-leave-to {
+    width: 0%;
+    opacity: 0;
+    margin-left: 0;
+  }
+  &-enter-to,
+  &-leave {
+    width: var(--width, 33%);
+    margin-left: var(--ml, 0);
+    opacity: 1;
+  }
+  &-enter-active,
+  &-leave-active {
+    overflow-x: hidden;
+    white-space: nowrap;
+    transition: width 0.5s ease, opacity 0.3s ease, margin-left 0.5s ease;
+  }
+}
+</style>