Flag to wait for out transition to finish before 'in' start

[Moonlander1]

Describe the problem

Having an element inside a key tag plays both its in and out transition. I feel most of the time you want them to play after each other and not simultaneously. It can easily be done by setting the delay on the in transition for the duration of the out transition, however when the duration varies for example on the text's length a lot of extra steps are needed to overcome this challange and does not scale at all.

Example:

{#key random_text}
    <h3 out:typewriter in:typewriter> {random_text} </h3>
{/key}

Describe the proposed solution

An easy solution would be to add a flag to the in transition to wait for the out transition.

Alternatives considered

Another fix could be to have the old value of the key accessable in the block, then the same calculations could be performed and it would give more flexibility.

Importance

would make my life easier

[elron]

did you try |global ?

[Moonlander1]

did you try |global ?

I'm not sure what you are referring to

[elron]

I'm referring to this <h3 out:typewriter|global in:typewriter|global> {random_text} </h3>

[Moonlander1]

I'm referring to this <h3 out:typewriter|global in:typewriter|global> {random_text} </h3>

That's not really related to the problem. The problem isn't triggering the animation, rather the overlap of the in and out animation. If you don't know the exact duration of the out aniamtion you can't delay the in animation so the new and old element overlap ruining the layout for the duration of the overlap.