fix: janky sidebar animation (#1726)

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>