You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
2.0 KiB
45 lines
2.0 KiB
<script lang="ts">
|
|
/**
|
|
* Eidos `<Motion>` — a single-element CONTENT animator (RFC §D.12, content domain).
|
|
*
|
|
* Names a `motion` preset; plays its ENTER on mount (presentation `data-state="open"`
|
|
* via `motionAttrs`, reusing the EXISTING state-preset) and its EXIT on removal (flips
|
|
* to `data-state='closed'` so the existing exit preset plays, then retains the node via
|
|
* Svelte `out:` for the eidos-declared duration before unmount). No new mechanism, no JS
|
|
* engine — just the existing enter/exit rules + reduced-motion.
|
|
*
|
|
* {#if show}<Motion motion="scale-fade">…</Motion>{/if}
|
|
*
|
|
* Renders a real box (needed for the transform/opacity to apply). For NO extra node,
|
|
* spread `motionAttrs(preset)` onto your own element instead (enter-only). For a
|
|
* STATEFUL component or an EVENT firma, don't wrap — those own the trigger.
|
|
*/
|
|
import { ActiveEidos, motionAttrs } from '$uix/eidos';
|
|
import type { MotionProps } from './types';
|
|
|
|
let { motion = 'fade', children, ...rest }: MotionProps = $props();
|
|
|
|
const eidos = ActiveEidos.require();
|
|
|
|
// Lifecycle only (no visual var written): on removal flip to `data-state='closed'`
|
|
// so the EXISTING exit preset plays, then hold the node for its eidos-declared
|
|
// duration (read ActiveDom-compliant) before Svelte unmounts it.
|
|
function leave(node: HTMLElement) {
|
|
node.setAttribute('data-state', 'closed');
|
|
const cs = eidos.dom.getWindow(node).getComputedStyle(node);
|
|
const ms = (parseFloat(cs.animationDelay) + parseFloat(cs.animationDuration)) * 1000 || 200;
|
|
return { duration: ms };
|
|
}
|
|
</script>
|
|
|
|
<!--
|
|
No part-presence marker: `data-motion` is taken by the reduced-motion prefs
|
|
(`[data-motion='reduce']`) — emitting it here would collide (a prefs
|
|
`closest('[data-motion]')` could match this wrapper). The functional attrs
|
|
(`data-animation-style` + `data-state`) come from `motionAttrs`; that's all the
|
|
enter/exit rules need.
|
|
-->
|
|
<div {...motionAttrs(motion)} out:leave {...rest}>
|
|
{@render children?.()}
|
|
</div>
|