Use alternate in and out transition values using an array

[GavHern]

Describe the problem

Transitions are wonderful but get a bit difficult to work with when you need them to be very similar but slightly different during the in transition vs. the out.

Describe the proposed solution

A solution that several libraries have used prior is to optionally take an array that contains two values where the first will be used during the in transition and the second is used during the out transition. Here's an example

<script>
    import { scale} from 'svelte/transition';
    import { quintIn, quintOut } from 'svelte/easing';
</script>

<article transition:scale={{ duration: 500, start: 0.5, opacity: 0.5, easing: [quintOut, quintIn] }}>
    Content goes here...
</article>

In this example, the quintOut easing would be applied during the in transition and the quintIn easing would be applied during the out transition.

Alternatives considered

You already can do this by using the in and out transition directives but it leads to a lot more (repetitive) code. Here's how you would implement this in modern svelte:

<article in:scale={{ duration: 500, start: 0.5, opacity: 0.5, easing: quintOut }} out:scale={{ duration: 500, start: 0.5, opacity: 0.5, easing: quintIn }}>
    Content goes here...
</article>

Importance

would make my life easier

[pngwn]

You can also do this:

<script>
  const config = {
    duration: 500, 
    start: 0.5, 
    opacity: 0.5
  };
</script>

<article 
  in:scale={{ ...config, easing: quintOut }} 
  out:scale={{ ...config, easing: quintIn }}
>
  Content goes here...
</article>