Svelte: Transitions: dynamic attributes

[gotys]

It seems the Outro transitions aren't respecting dynamic attributes.
I am trying to have a page-slider that dynamically updates the Out / In Fly directions based on some mathematical logic.
It seems that once the Element is mounted the transition settings cannot be updated.

I made a little demo here that should change the outro speed when buttons clicked, but does not:
https://svelte.dev/repl/f8a0a3d1010d4669a81940770547dabf?version=3.12.1

By the way - if there is currently a workaround, can someone please tell me ?

[remimi]

I think the easiest way to do this is to use the in and out directives.

Like this :

<div in:fly="{{x: 500, duration: variableSpeed}}" out:fly="{{x: 500, duration: variableSpeed}}" style="{css}">
    My Speed is {variableSpeed}
</div>

Hope this helps !

[Conduitry]

I don't see off the top of my head why this would have to work the way it does. If the (two-way) transition is currently underway, I can see why changes wouldn't take effect, because we need it to be reversible before completing. But I'm not sure why, once the transition-in is completely finished, those same params would need to be locked in for the later transition-out.

[gotys]

I don't see off the top of my head why this would have to work the way it does. If the (two-way) transition is currently underway, I can see why changes wouldn't take effect, because we need it to be reversible before completing. But I'm not sure why, once the transition-in is completely finished, those same params would need to be locked in for the later transition-out.

My use case is page transitions in my application. Imagine an app with sapper routes, where each route can enter ( fly animation ) either from left or right, but will leave the view also either to the left, or to the right - depending on some internal logic. In other words, I don't know the direction of exit until some link is clicked - and then based on where I am heading next - THAN I decide the exit direction.

Hope it makes sense, thank you.

[thelowman]

I agree that you should be able to use a single transition attribute and change it as needed but specifying both in and out transitions separately does the trick. I've posted this REPL that I've worked out to help me solve a problem that I think may be similar to yours. I hope it helps.

[jcarpenter]

I hit this when trying to dynamically set animate:flip params. This REPL captures what I'm seeing.

Svelte encourages reactive dynamism everywhere, so this feels like a counter-intuitive limitation. Barring a fix, perhaps the docs could mention the issue? Might save others time trying to figure out what's going on.