From 9b1bcc451d45ff57b1d98bb26e77eecbdddeca5e Mon Sep 17 00:00:00 2001
From: Albermonte <14013679+Albermonte@users.noreply.github.com>
Date: Mon, 21 Aug 2023 19:12:04 +0200
Subject: [PATCH] Added opacity transition to close button

---
 src/components/SearchBar.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index b757249c1..ec7c34764 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -18,16 +18,18 @@
             @focus="handleFocus"
             @blur="handleBlur"
         />
-        <CrossCloseButton
-            class="cross-close-button"
-            v-if="isInputActive"
-            @click="handleClose"
-        />
+        <transition name="fade">
+            <CrossCloseButton
+                class="cross-close-button"
+                v-if="isInputActive"
+                @click="handleClose"
+            />
+        </transition>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, onUnmounted, computed, watch } from '@vue/composition-api';
+import { defineComponent, ref, onMounted, onUnmounted, computed } from '@vue/composition-api';
 
 import CrossCloseButton from './CrossCloseButton.vue';
 
@@ -237,6 +239,10 @@ input {
     cursor: pointer;
 }
 
+.fade-enter-active, .fade-leave-active {
+    transition-duration: var(--attr-duration);
+}
+
 @media (min-width: 700px) and (max-width: 900px) {
     .cover-all {
         &:focus-within {