Transition hooks not working properly (only when using SFCs)

[pearofducks]

Version

3.0.0-beta.19

Reproduction link

https://github.com/pearofducks/transition-reproduction

Steps to reproduce

Run the example here: https://jsfiddle.net/yubjge1m/4/ (or run the avoid-sfc branch of the GitHub repo)

• See that the onLeave hook waits until done is called to set display: none

Run the example in the GitHub repro (that uses SFCs)

• See that the onLeave hook sets display: none immediately, even though done isn't called until 1s later

What is expected?

Element visibility isn't toggled until done is called

What is actually happening?

Element is hidden immediately

---

After further investigation, it seems this is caused by something to do with SFCs.

Here is an alternative Codesandbox link that uses SFCs

[underfin]

This caused by the length is untrunst value for Transition call leave hook. The hook is wrapped and cacheabled (compiled code is (_cache[1] = ($event, ...args) => (_ctx.onLeave($event, ...args))).The same as happend in js.

So, I think it should be a break change and it should under user control.We don't implictly call done when the length is unexpected.

[pearofducks]

Not completely clear on what you're describing. :)

If this is supposed to be mitigated by the user, IMO this should be explicitly documented - and it'd be great to know what changes I can make in the meantime.

IMO this should not be under use control, since it's both a regression vs. Vue 2, and the different behaviors that can be experienced in Vue 3. At the very least those should be unified or have a warning or something? But that's just my thoughts from a DX perspective.

[pearofducks]

Friggin awesome - thanks @yyx990803 !!

[underfin]

@yyx990803 .This also happened with blew code.

onLeave: (...arg) => {
        const [el, done] =arg
        el.style.backgroundColor = 'red'
        setTimeout(done, 10000)
      }