Delay does not track reactivity when used in :leave variant

[0x408]

My directive usage

v-motion="'leftBar'"
:initial="{x: -400, opacity: 0}"
:enter="{x: 0, opacity: 1, transition: {delay: barOpenDelay, type: 'spring', stiffness: 250, damping: 25, mass: 0.5}}"
:leave="{x: -400, opacity: 0, transition: {delay: leftBarCloseDelay, type: 'spring', stiffness: 200, damping: 25, mass: 1}}"

barOpenDelay(): number {
	return this.backdropIsRendered ? 300 : 0;
}

leftBarCloseDelay(): number {
	return this.leftSubBarIsRendered ? 300 : 0;
},

barOpenDelay works absolutely fine, but delay in :leave with leftBarCloseDelay always uses the first number it gets (in my example the site always opens with sidebars closed, so 0 is used). I also switched barOpenDelay and leftBarCloseDelay -- delay in :enter worked as expected.

I double-checked everything that could possibly be my mistake, but it is surely somewhere in motion's code.

[Tahul]

Hello @morkvitnir ; thank you a lot for your issue!

I've personally not been using delay on leave transition!

Could you show the whole template code you use with that transition so I can reproduce this?

I would like to see how you use the leave transition especially, because I suspect that the way we apply leave transition might be faulty here.

[0x408]

https://codesandbox.io/s/vueuse-motion-delay-leave-reactivity-4xhn1?file=/src/store/index.js

Open first -> Open second -> Close both = Bug (Animations occur simultaneously) Open second -> Open first -> Close both = No bug Open both -> Close both = No bug

I also made two variants: with Vuex and without one. It does not matter if i use Vuex or not, the bug is still there.

I double-checked everything that could possibly be my mistake, but it is surely somewhere in motion's code.

After triple-check i don't even know what is going on and where does the bug come from.