Usage

Returns a class for animating an element on mount. Only animates when the element is dynamically inserted after the initial page paint; elements rendered on page load are not animated. Uses Astryx motion tokens (duration, easing) for consistent animation timing. Nothing animates during server rendering.

import { useEntryAnimation } from '@astryx-vue/core'

Bind the returned entryClass next to the element's own classes; Vue merges class bindings, so it never replaces them. entryClass is null when the element should not animate, and a class binding drops null, which is exactly the behavior you want. The class carries the shared keyframes from styles/motion.css, so duration, easing, and the reduced-motion fallback all come from the theme.

Best practices

Guidance	Practices
Do	Use for conditionally rendered elements like validation messages, toasts, or expanding sections.
Do	Add the returned class next to the element's own classes, so the animation stacks with its styling instead of replacing it.
Don't	Use for elements that should be visible on initial page load; they will not animate.