fix: Backport vertical animation fix from 5.x

Author: danharrin

packages/notifications/dist/index.js

@@ -27,6 +27,10 @@
         &.fi-modal-window-has-footer .fi-modal-content {
             @apply border-b border-gray-200 dark:border-white/10;
         }
+
+        & .fi-modal-footer {
+            @apply pt-6;
+        }
     }
 
     & .fi-no-notification-unread-ctn {

packages/notifications/resources/css/database-notifications.css

@@ -76,11 +76,15 @@ export default (Alpine) => {
         },
 
         configureAnimations() {
-            let animation
+            // Inline notifications, such as those in the database
+            // notifications modal, are removed instantly, without animation.
+            if (this.$el.classList.contains('fi-inline')) {
+                return
+            }
 
             this.unsubscribeLivewireHook = Livewire.hook(
                 'commit',
-                ({ component, commit, succeed, fail, respond }) => {
+                ({ component, succeed }) => {
                     if (
                         !component.snapshot.data
                             .isFilamentNotificationsComponent
@@ -95,44 +99,54 @@ export default (Alpine) => {
                             this.$el.getBoundingClientRect().top
                         const oldTop = getTop()
 
-                        respond(() => {
-                            animation = () => {
-                                if (!this.isShown) {
-                                    return
-                                }
-
-                                this.$el.animate(
-                                    [
+                        succeed(() => {
+                            // `succeed` runs before Livewire morphs the DOM, which it
+                            // defers using two nested `queueMicrotask()` calls, so the
+                            // animation is deferred in the same way to run once the DOM
+                            // has been morphed, before the browser paints, so the new
+                            // position can be measured and the animation started without
+                            // the notification flashing in its final position.
+                            queueMicrotask(() =>
+                                queueMicrotask(() => {
+                                    if (!this.isShown) {
+                                        return
+                                    }
+
+                                    // Finish any running animations so they do not distort
+                                    // the measurement of the new position.
+                                    this.$el
+                                        .getAnimations()
+                                        .forEach((animation) =>
+                                            animation.finish(),
+                                        )
+
+                                    const newTop = getTop()
+
+                                    if (oldTop === newTop) {
+                                        return
+                                    }
+
+                                    this.$el.animate(
+                                        [
+                                            {
+                                                transform: `translateY(${oldTop - newTop}px)`,
+                                            },
+                                            { transform: 'translateY(0px)' },
+                                        ],
                                         {
-                                            transform: `translateY(${
-                                                oldTop - getTop()
-                                            }px)`,
+                                            duration: this.transitionDuration,
+                                            easing: this.transitionEasing,
                                         },
-                                        { transform: 'translateY(0px)' },
-                                    ],
-                                    {
-                                        duration: this.transitionDuration,
-                                        easing: this.transitionEasing,
-                                    },
-                                )
-                            }
-
-                            this.$el
-                                .getAnimations()
-                                .forEach((animation) => animation.finish())
-                        })
-
-                        succeed(({ snapshot, effect }) => {
-                            animation()
+                                    )
+                                }),
+                            )
                         })
                     })
                 },
             )
         },
 
         close(isImmediate = false) {
-            this.isShown = false
-
             const dispatchClosedEvent = () =>
                 window.dispatchEvent(
                     new CustomEvent('notificationClosed', {
@@ -143,11 +157,24 @@ export default (Alpine) => {
                 )
 
             if (isImmediate === true) {
+                this.isShown = false
+
                 dispatchClosedEvent()
 
                 return
             }
 
+            // Inline notifications, such as those in the database
+            // notifications modal, are part of a list, so they are removed
+            // from it as soon as possible instead of fading out first.
+            if (this.$root.classList.contains('fi-inline')) {
+                dispatchClosedEvent()
+
+                return
+            }
+
+            this.isShown = false
+
             setTimeout(dispatchClosedEvent, this.transitionDuration)
         },
 

packages/notifications/resources/js/components/notification.js

@@ -74,6 +74,7 @@ class="fi-no-database"
 
             @foreach ($notifications as $notification)
                 <div
+                    wire:key="{{ $notification->getKey() }}.database-notifications.ctn"
                     @class([
                         'fi-no-notification-read-ctn' => ! $notification->unread(),
                         'fi-no-notification-unread-ctn' => $notification->unread(),