Description
Is your feature request related to a problem? Please describe.
Documentation does not make it clear how to implement our own custom functions with functionality similar to the crossfade transition. I had to examine the source code to get a clear idea of how it worked.
Describe the solution you'd like
The crossfade function can be easily broken out to two functions: one utility function for orchestrating the pairing of outgoing/incoming element and the actual crossfade. If that utility function was exported and documented, it would considerably reduce the barrier to writing custom crossfade like interactions.
Practical example, since that is far easier to explain than the general case:
https://svelte.dev/repl/64e6b0c360bf4cb29704cca6b76f0f30?version=3.35.0
In the above REPL, the proposed utility function is located in util.js. It accepts a single function, which is expected to return void or a transition object. That function is passed the params:
- from - HTMLElement transitioning out
- to - HTMLElement transitioning in
- intro - Boolean. True if this is transitioning in, false otherwise
- params - Object. Parameters passed from the transition call in the template
In the above REPL, crossfade.js contains Svelte's existing crossfade animation, modified to use this utility, to verify that this does not introduce any breaking changes. cross-slide.js shows a similar type of animation, using the same utility.
🐃: from and to are simple and straight forward to teach. I have had to flip them based on intro in every single use so far, however.
How important is this feature to you?
Trivial. This proposal simply makes learning a feature a little easier, but that could be covered by blog posts, tutorials, etc.