transiton out problem

[freeseamew]

There is one inquiry to use the transiton effect.

If you give both in and out effects as follows,

Even if delay is set on in, both components appear and disappear during out effect.

How can I solve this problem?

{#key $router.path}
    <div in:fly="{{ x:300, duration: 400, delay:500}}" out:fade="{{ duration: 500}}" >
        <slot></slot>
    </div>
{/key}