Public API for creating Animation from the svelte/transition module

[adiguba]

Describe the problem

The svelte/transition module is really useful and easy to use, but it is restricted to the template and the {#if} / {#each} blocks.

It would be convenient to be able to use them manually if needed.

Describe the proposed solution

Provide a public fonction for creating animation based on the svelte/transition module.

Something like this :

import { slide } from 'svelte/transition';
import { quintOut } from 'svelte/easing';

/** @type {HTMLElement} */
let dom = ...

const anim = createAnim(dom, slide, {duration: 500, easing: quintOut});

transition will be a object Animation or TickAnimation, with method like play(), pause(), reverse(), cancel(), finish() and one onfinish handler

Example in this REPL, where transition.js mainly consists of code from internal/client/transition.js

Alternatives considered

Use duplicate code or another library

Importance

would make my life easier

[huntabyte]

Something like this would be pretty sweet, especially for SEO purposes. Think collapsible/accordion components where the content is collapsed until opened. If you use {#if} blocks to leverage svelte transitions, this prevents the non-open content from being picked up for SEO.

Justification for adding to the framework vs just having everyone create their own is some form of soft standardization/predictability across the ecosystem.

[7nik]

Working right on DOM elements isn't svelty way.

For collapsing elements, there is svelte-collapse (though it needs a fix for folding margins, padding, and borders) and svelte-collapsible build on top of the former.

For many other cases, CSS transition and animation usually provide enough flexibility. For other cases involving more complex animations, you may want to use svelte-motion or some other animation lib.

And, after all, it is possible to copy the transitions into its own library and expose them via whatever interface you want.

[huntabyte]

Working right on DOM elements isn't svelty way.

For collapsing elements, there is svelte-collapse (though it needs a fix for folding margins, padding, and borders) and svelte-collapsible build on top of the former.

For many other cases, CSS transition and animation usually provide enough flexibility. For other cases involving more complex animations, you may want to use svelte-motion or some other animation lib.

And, after all, it is possible to copy the transitions into its own library and expose them via whatever interface you want.

Both of those projects work "right on DOM elements" via an action

[adiguba]

It's just that Svelte offers a simple and effective transition module, but which is restricted to {#if}/{#each}.

So we have all the basic, except that we cannot invoke it directly without add/removing nodes...

It's not a "big deal", but it could be practical.

[7nik]

@huntabyte I'm about

/** @type {HTMLElement} */
let dom = ...

const anim = createAnim(dom, slide, {duration: 500, easing: quintOut});

Exposing an element into a dom or smth to then use a build-in thing isn't svelty.