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

Should transition listen to the v-show set in the component root? #3431

Closed
miljan-aleksic opened this issue Aug 12, 2016 · 2 comments
Closed

Comments

@miljan-aleksic
Copy link

I am not sure if it's the best way to go, but I thought that leaving the transition wrapper outside the components would leave more freedom to integrate it as required (for example with or without keep-alive, custom events callbacks, etc).

With that in mind and taking as example a modal component it would usually have a show prop used to control the modal display. Transition expects v-show to know when to start and to avoid this kind of code <modal v-show="show" :show="show" /> the v-show would be set in the component root directly. The final code with transition would be simple as

<transition>
  <modal show="show" />
<transition>

But that would not work as transition expects v-show right there. There is a jsfiddle that illustrate the issue (just ignore the badly implemented transition css...).

I see two ways to solve this:

  1. Make transition be aware of v-show set on the root it self
  2. Make available some event or way to trigger a transition programatically. That way from the compnent it self we could decide when that should happen.

Vue.js version

2.0.0-rc1

Reproduction Link

https://jsfiddle.net/miljan/8Lca03gb/

Steps to reproduce

Try opening the modal

What is Expected?

To open with a transition, which does happen if you set v-show again in the component declaration.

What is actually happening?

It opens without a transition.

@yyx990803
Copy link
Member

@miljan-aleksic FYI, I implemented support for this but decided to revert it. The point is that <transition> should be wrapping the direct node that is being manipulated by v-show or v-if. When you use v-show or v-if inside the component, it becomes indirect and imo ends up being harder to reason about.

So there are two options for the use case:

  1. Use both <transition> and v-show in the parent scope.
  2. Use both <transition> and v-show inside the child component. In this case you can also allow the user to pass in props to customize the transition.

@miljan-aleksic
Copy link
Author

I was playing around with the changes and it introduced some new bugs difficult to confirm, plus during the process I had the chance to experiment more with the different configurations. Keeping the transitions direct gives you full power over the overall process which in more complex components could be necessary.

I totally agree with your decision and thanks for letting me know, @yyx990803.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants