style: add transitions to filter (#880)

SlovakNationalGallery · Aug 16, 2023 · 93042f5 · 93042f5
1 parent a5cbadf
commit 93042f5
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 101 deletions.
diff --git a/resources/js/components/catalog-new/PopoverController.vue b/resources/js/components/catalog-new/PopoverController.vue
@@ -7,13 +7,22 @@
             :togglePopover="togglePopover"
         ></slot>
     </div>
-    <div ref="body" class="tw-z-10">
-        <slot
-            name="body"
-            :isOpen="this.isOpen"
-            :closeOpenedPopover="this.closeOpenedPopover"
-        ></slot>
-    </div>
+    <transition
+        enter-active-class="duration-300 ease-out"
+        enter-from-class="transform opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="duration-200 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="transform opacity-0"
+    >
+        <div ref="body" class="tw-z-10">
+            <slot
+                name="body"
+                :isOpen="this.isOpen"
+                :closeOpenedPopover="this.closeOpenedPopover"
+            ></slot>
+        </div>
+    </transition>
 </template>
 <script>
 import { createPopper } from '@popperjs/core'

diff --git a/resources/views/components/filter/search_popover.blade.php b/resources/views/components/filter/search_popover.blade.php
@@ -19,8 +19,12 @@ class="tw-border tw-bg-white tw-py-2.5 tw-px-4 hover:tw-border-gray-800"
         </div>
     </template>
     <template #body="pc">
-        <div v-if="pc.isOpen" v-on-clickaway="pc.closeOpenedPopover">
-            {{ $body }}
-        </div>
+        <transition enter-from-class="tw-opacity-0" leave-to-class="tw-opacity-0"
+            enter-active-class="tw-transition tw-duration-300"
+            leave-active-class="tw-transition tw-duration-300">
+            <div v-if="pc.isOpen" v-on-clickaway="pc.closeOpenedPopover">
+                {{ $body }}
+            </div>
+        </transition>
     </template>
 </filter-popover-controller>