Core, Tests - Replace motion config with CSS variables (#85)

* Core, Tests - Replace motion config with CSS variables

Drop animations and transition from NotivueConfig. Apply enter, leave,
clearAll, and reposition timing via MOTION_VARS_CSS inline styles and
:root defaults in animations.css.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Tests - Fix reduced-motion specs for instant dismiss

Assert no motion CSS vars are applied and notifications dismiss
immediately without waiting for ol or container nodes that reduced
motion removes on clear.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Core, Tests - Harden motion CSS variable handling

Guard animationend handlers against bubbled child animations, handle CSS-variable animations that resolve to none, and assert custom animation variables through computed styles.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Core - Rename default motion keyframes

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: smastrom

packages/notivue/core/animations.css

@@ -1,30 +1,18 @@
-[data-notivue-align='top'] {
-   & .Notivue__enter,
-   & .Notivue__leave {
-      --notivue-ty: -200%;
-   }
-}
-
-[data-notivue-align='bottom'] {
-   & .Notivue__enter,
-   & .Notivue__leave {
-      --notivue-ty: 200%;
-   }
-}
-
-.Notivue__enter {
-   animation: Notivue__enter-kf 350ms cubic-bezier(0.5, 1, 0.25, 1);
+:root {
+   --nv-enter-animation: nv-enter-anim-kf 350ms cubic-bezier(0.5, 1, 0.25, 1);
+   --nv-leave-animation: nv-leave-anim-kf 350ms ease;
+   --nv-clear-all-animation: nv-clear-all-anim-kf 500ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-.Notivue__leave {
-   animation: Notivue__leave-kf 350ms ease;
+[data-notivue-align='top'] {
+   --notivue-ty: -200%;
 }
 
-.Notivue__clearAll {
-   animation: Notivue__clearAll-kf 500ms cubic-bezier(0.22, 1, 0.36, 1);
+[data-notivue-align='bottom'] {
+   --notivue-ty: 200%;
 }
 
-@keyframes Notivue__enter-kf {
+@keyframes nv-enter-anim-kf {
    0% {
       transform: translate3d(0, var(--notivue-ty), 0) scale(0.25);
       opacity: 0;
@@ -36,7 +24,7 @@
    }
 }
 
-@keyframes Notivue__leave-kf {
+@keyframes nv-leave-anim-kf {
    0% {
       transform: translate3d(0, 0, 0) scale(1);
       opacity: 0.7;
@@ -48,7 +36,7 @@
    }
 }
 
-@keyframes Notivue__clearAll-kf {
+@keyframes nv-clear-all-anim-kf {
    0% {
       opacity: 1;
    }

packages/notivue/core/constants.ts

@@ -43,6 +43,22 @@ export const DEFAULT_NOTIFICATION_OPTIONS = {
    [NotificationTypeKeys.PROMISE_REJECT]: {},
 } as NotivueConfigRequired['notifications']
 
+export const MOTION_VARS = {
+   enterAnimation: '--nv-enter-animation',
+   leaveAnimation: '--nv-leave-animation',
+   clearAllAnimation: '--nv-clear-all-animation',
+   transformTransition: '--nv-transform-transition',
+} as const
+
+export const DEFAULT_TRANSFORM_TRANSITION = 'transform 0.35s cubic-bezier(0.5, 1, 0.25, 1)'
+
+export const MOTION_VARS_CSS = {
+   enterAnimation: `var(${MOTION_VARS.enterAnimation})`,
+   leaveAnimation: `var(${MOTION_VARS.leaveAnimation})`,
+   clearAllAnimation: `var(${MOTION_VARS.clearAllAnimation})`,
+   transformTransition: `var(${MOTION_VARS.transformTransition}, ${DEFAULT_TRANSFORM_TRANSITION})`,
+} as const
+
 export const DEFAULT_CONFIG: NotivueConfigRequired = {
    pauseOnHover: true,
    pauseOnTouch: true,
@@ -53,10 +69,4 @@ export const DEFAULT_CONFIG: NotivueConfigRequired = {
    notifications: DEFAULT_NOTIFICATION_OPTIONS,
    limit: -1,
    avoidDuplicates: false,
-   transition: 'transform 0.35s cubic-bezier(0.5, 1, 0.25, 1)',
-   animations: {
-      enter: CLASS_PREFIX + 'enter',
-      leave: CLASS_PREFIX + 'leave',
-      clearAll: CLASS_PREFIX + 'clearAll',
-   },
 }

packages/notivue/core/createStore.ts

@@ -14,9 +14,9 @@ import type {
    NotivueStore,
 } from 'notivue'
 
-import { ref, shallowRef, triggerRef, unref, isRef, type Ref } from 'vue'
+import { ref, shallowRef, triggerRef, unref, isRef, type CSSProperties, type Ref } from 'vue'
 
-import { DEFAULT_CONFIG, NotificationTypeKeys as NType } from './constants'
+import { DEFAULT_CONFIG, MOTION_VARS_CSS, NotificationTypeKeys as NType } from './constants'
 
 import {
    createConfigRefs,
@@ -60,7 +60,7 @@ export function createConfig(userConfig: NotivueConfig, isRunning: Readonly<Ref<
             const prev = config[key as K].value as Obj
             const next = newConfig[key as K] as any
 
-            config[key as K].value = mergeDeep(prev, next)
+            config[key as K].value = mergeDeep(prev, next) as any
          } else {
             config[key as K].value = newConfig[key as K] as any
          }
@@ -169,12 +169,15 @@ export function createItems(config: ConfigSlice, queue: QueueSlice) {
 }
 
 export function createElements() {
-   type AnimationAttrs = { class: string; onAnimationend: () => void }
+   type MotionAttrs = {
+      style?: CSSProperties
+      onAnimationend?: (e?: AnimationEvent) => void
+   }
 
    return {
       root: ref<HTMLElement | null>(null),
-      rootAttrs: shallowRef<Partial<AnimationAttrs>>({}),
-      setRootAttrs(newAttrs: Partial<AnimationAttrs>) {
+      rootAttrs: shallowRef<Partial<MotionAttrs>>({}),
+      setRootAttrs(newAttrs: Partial<MotionAttrs>) {
          this.rootAttrs.value = newAttrs
       },
       items: ref<HTMLElement[]>([]),
@@ -186,10 +189,10 @@ export function createElements() {
    } as {
       // Suppress TS7056
       root: Ref<HTMLElement | null>
-      rootAttrs: Ref<Partial<AnimationAttrs>>
+      rootAttrs: Ref<Partial<MotionAttrs>>
       items: Ref<HTMLElement[]>
       containers: Ref<HTMLElement[]>
-      setRootAttrs(newAttrs: Partial<AnimationAttrs>): void
+      setRootAttrs(newAttrs: Partial<MotionAttrs>): void
       getSortedItems(): HTMLElement[]
    }
 }
@@ -206,13 +209,17 @@ export function createAnimations(
          this.isReducedMotion.value = newVal
       },
       playLeave(id: string, { isDestroy = false, isUserTriggered = false } = {}) {
-         const { leave = '' } = config.animations.value
          const item = items.get(id)
 
+         let isDone = false
+
          window.clearTimeout(item?.timeout as number)
 
          const onAnimationend = (e?: AnimationEvent) => {
             if (e && e.currentTarget !== e.target) return
+            if (isDone) return
+
+            isDone = true
 
             if (item) {
                const slotItem = getSlotItem(item)
@@ -229,7 +236,7 @@ export function createAnimations(
             items.remove(id)
          }
 
-         if (!item || !leave || isDestroy || this.isReducedMotion.value) {
+         if (!item || isDestroy || this.isReducedMotion.value) {
             items.addLifecycleEvent()
 
             return onAnimationend()
@@ -241,36 +248,52 @@ export function createAnimations(
                zIndex: -1,
             },
             animationAttrs: {
-               class: leave,
+               style: { animation: MOTION_VARS_CSS.leaveAnimation },
                onAnimationend,
             },
          })
 
          items.addLifecycleEvent()
+
+         requestAnimationFrame(() => {
+            const el = elements.containers.value.find((el) => el.dataset.notivueContainer === id)
+
+            if (el && getComputedStyle(el).animationName === 'none') onAnimationend()
+         })
       },
       playClearAll() {
          items.entries.value.forEach((e) => window.clearTimeout(e.timeout as number))
 
-         const { clearAll = '' } = config.animations.value
+         let isDone = false
+
+         const onAnimationend = (e?: AnimationEvent) => {
+            if (e && e.currentTarget !== e.target) return
+            if (isDone) return
+
+            isDone = true
 
-         const onAnimationend = () => {
             queue.clear()
             items.clear()
          }
 
-         if (!clearAll || this.isReducedMotion.value) return onAnimationend()
+         if (this.isReducedMotion.value) return onAnimationend()
 
          elements.setRootAttrs({
-            class: clearAll,
+            style: { animation: MOTION_VARS_CSS.clearAllAnimation },
             onAnimationend,
          })
+
+         requestAnimationFrame(() => {
+            const root = elements.root.value
+
+            if (root && getComputedStyle(root).animationName === 'none') onAnimationend()
+         })
       },
       updatePositions({ isImmediate = false } = {}) {
          console.log('Updating positions')
 
          const isReduced = this.isReducedMotion.value || isImmediate
          const isTopAlign = config.position.value.startsWith('top')
-         const leaveClass = config.animations.value.leave
 
          let accPrevHeights = 0
 
@@ -279,12 +302,12 @@ export function createAnimations(
             const item = items.get(id)
 
             if (!el || !item) continue
-            if (item.animationAttrs.class === leaveClass) continue
+            if (item.animationAttrs.style?.animation === MOTION_VARS_CSS.leaveAnimation) continue
 
             items.update(id, {
                positionStyles: {
                   transform: `translate3d(0, ${accPrevHeights}px, 0)`,
-                  transition: isReduced ? 'none' : config.transition.value,
+                  transition: isReduced ? 'none' : MOTION_VARS_CSS.transformTransition,
                },
             })
 
@@ -479,11 +502,15 @@ export function createNotifyProxies({
                createdAt,
                duplicateCount: 0,
                animationAttrs: {
-                  class: animations.isReducedMotion.value ? '' : config.animations.value.enter,
-                  onAnimationend() {
-                     if (item.animationAttrs.class === config.animations.value.enter) {
+                  style: animations.isReducedMotion.value
+                     ? {}
+                     : { animation: MOTION_VARS_CSS.enterAnimation },
+                  onAnimationend(e?: AnimationEvent) {
+                     if (e && e.currentTarget !== e.target) return
+
+                     if (item.animationAttrs.style?.animation === MOTION_VARS_CSS.enterAnimation) {
                         items.update(entry.id, {
-                           animationAttrs: { class: '', onAnimationend: () => {} },
+                           animationAttrs: { style: {}, onAnimationend: () => {} },
                         })
                      }
                   },

packages/notivue/core/types.ts

@@ -48,12 +48,6 @@ export type Position =
    | 'bottom-center'
    | 'bottom-right'
 
-export interface NotivueAnimations {
-   enter?: string
-   leave?: string
-   clearAll?: string
-}
-
 export interface NotificationOptions {
    /** Default title (`''` hides the title). */
    title?: string | Ref<string>
@@ -75,9 +69,6 @@ export interface NotivueConfig {
    /** Stream anchor; see `Position`. */
    position?: Position
    notifications?: Partial<NotificationTypesOptions>
-   animations?: NotivueAnimations
-   /** Must match `transform <duration> <timing-function>`. */
-   transition?: string
    teleportTo?: string | HTMLElement | false
    /** Use `-1` for unlimited. @default -1 */
    limit?: number
@@ -112,7 +103,7 @@ export interface HiddenInternalItemData {
    timeout: number | undefined | (() => void) | void
    resumedAt: number
    remaining: number
-   animationAttrs: Partial<{ class: string; onAnimationend: () => void }>
+   animationAttrs: Partial<{ style: CSSProperties; onAnimationend: (e?: AnimationEvent) => void }>
    positionStyles: CSSProperties
 }
 

tests/Notivue/components/Notivue.vue

@@ -25,8 +25,7 @@ const config = useNotivue()
 const { startInstance, stopInstance } = useNotivueInstance()
 const { entries, queue } = useNotifications()
 
-const { pauseOnTouch, pauseOnHover, teleportTo, limit, animations, enqueue, avoidDuplicates } =
-   toRefs(cyProps)
+const { pauseOnTouch, pauseOnHover, teleportTo, limit, enqueue, avoidDuplicates } = toRefs(cyProps)
 
 const autoClearCount = ref(0)
 const manualClearCount = ref(0)
@@ -36,10 +35,8 @@ const manualClearCount = ref(0)
  * ==================================================================================== */
 
 watchEffect(() => {
-   if (animations?.value) config.animations.value = animations.value
    if (pauseOnTouch?.value) config.pauseOnTouch.value = pauseOnTouch.value
    if (pauseOnHover?.value) config.pauseOnHover.value = pauseOnHover.value
-   if (animations?.value) config.animations.value = animations.value
    if (teleportTo?.value) config.teleportTo.value = teleportTo.value
    if (limit?.value) config.limit.value = limit.value
    if (enqueue?.value) config.enqueue.value = enqueue.value