From 5a0830b8d524b00bbac25d41129ad7c09b97c4cb Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Thu, 13 Feb 2020 19:49:38 +0100
Subject: [PATCH] refactor: move searchform transition to css file

---
 client/src/assets/css/transition.css | 28 ++++++++++++++++++++++------
 client/src/components/SearchForm.vue | 18 ++----------------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/client/src/assets/css/transition.css b/client/src/assets/css/transition.css
index 1c03f9d..b7f3d1a 100644
--- a/client/src/assets/css/transition.css
+++ b/client/src/assets/css/transition.css
@@ -45,19 +45,17 @@
 
 .slide-fade-enter-active,
 .slide-fade-leave-active {
-    transition: all 0.4s;
+  transition: all 0.4s;
 }
 
 .slide-fade-enter,
 .slide-fade-leave-to {
-    transform: translateX(400px);
-    opacity: 0;
+  transform: translateX(400px);
+  opacity: 0;
 }
 
 .tab-enter-active {
-  transition: all;
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(.25, .46, .45, .94);
+  @apply transition-all transition-fast ease-out-quad;
 }
 
 .tab-enter {
@@ -68,4 +66,22 @@
   opacity: 1;
 }
 
+.scale-fade-enter-active {
+  @apply transition-all transition-fastest ease-out-quad;
+}
+
+.scale-fade-leave-active {
+  @apply transition-all transition-fastest ease-in-quad;
+}
+
+.scale-fade-enter,
+.scale-fade-leave-to {
+  @apply opacity-0 scale-90;
+}
+
+.scale-fade-enter-to,
+.scale-fade-leave {
+  @apply opacity-100 scale-100;
+}
+
 /* purgecss end ignore */
diff --git a/client/src/components/SearchForm.vue b/client/src/components/SearchForm.vue
index 5d70119..41a9011 100644
--- a/client/src/components/SearchForm.vue
+++ b/client/src/components/SearchForm.vue
@@ -10,14 +10,7 @@
         :class="[inputClasses]"
         class="w-full rounded-lg outline-none pl-6 pr-32 font-bold focus:bg-blue-1000"
       />
-      <transition
-        enter-active-class="transition-all transition-fastest ease-out-quad"
-        leave-active-class="transition-all transition-faster ease-in-quad"
-        enter-class="opacity-0 scale-90"
-        enter-to-class="opacity-100 scale-100"
-        leave-class="opacity-100 scale-100"
-        leave-to-class="opacity-0 scale-90"
-      >
+      <transition name="scale-fade">
         <SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
       </transition>
 
@@ -33,14 +26,7 @@
           </svg>
         </div>
       </div>
-      <transition
-        enter-active-class="transition-all transition-fastest ease-out-quad"
-        leave-active-class="transition-all transition-faster ease-in-quad"
-        enter-class="opacity-0 scale-90"
-        enter-to-class="opacity-100 scale-100"
-        leave-class="opacity-100 scale-100"
-        leave-to-class="opacity-0 scale-90"
-      >
+      <transition name="scale-fade">
         <div
           v-show="dropdown"
           :class="[dropdownClasses]"