Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transition hooks not working properly (only when using SFCs) #1541

Closed
pearofducks opened this issue Jul 7, 2020 · 4 comments
Closed

Transition hooks not working properly (only when using SFCs) #1541

pearofducks opened this issue Jul 7, 2020 · 4 comments

Comments

@pearofducks
Copy link

pearofducks commented Jul 7, 2020

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

@pearofducks pearofducks changed the title Transition hooks not working properly Transition hooks not working properly (only when using SFCs) Jul 8, 2020
@underfin
Copy link
Member

underfin commented Jul 8, 2020

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
Copy link
Author

pearofducks commented Jul 8, 2020

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
Copy link
Author

Friggin awesome - thanks @yyx990803 !!

@underfin
Copy link
Member

underfin commented Jul 9, 2020

@yyx990803 .This also happened with blew code.

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

@github-actions github-actions bot locked and limited conversation to collaborators Nov 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants