search

vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.67k stars 33.67k forks source link

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

Closed miljan-aleksic closed 8 years ago

miljan-aleksic commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

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.