Vuejs.org: Transition-group mode is not supported

Created on 9 May 2018  路  5Comments  路  Source: vuejs/vuejs.org

The following has no effect.

<transition-group mode="out-in">
...
</transition-group>

Also confirmed in the transition-group.js component source:

const props = extend({
  tag: String,
  moveClass: String
}, transitionProps)

delete props.mode

As Evan You said:

This is unlikely to happen due to the sheer complexity - it will likely introduce too much extra code for a relatively non-critical use case, and the behavior of the transition modes on multiple items can be vague and hard to define. Even if we were to implement it, we'd probably ship it as a separate plugin instead of as part of core.

I feel like this should be explicitly mentioned in the list transition documentation. It's easy to assume that it should work, but it won't.

pull request welcome

Most helpful comment

@emileber Doing a chunk of docs work today, so just added a fix for this, but would love to hear your thoughts on it. 馃檪

All 5 comments

Excellent point. I'll try to add a note about that. Pull request to fix also welcome.

I could definitely make a pull request for this. I could even translate it to french and pull on vuejs-fr/vuejs.org

I'll setup the project and propose something shortly.

@emileber Doing a chunk of docs work today, so just added a fix for this, but would love to hear your thoughts on it. 馃檪

@chrisvfritz exactly what I had in mind!

Maybe mentioning the mode attribute explicitly in addition to the current message would help as well?

I actually considered that when drafting:

Transition modes using the mode attribute are not available, because we are no longer alternating between mutually exclusive elements.

However, I worried this could imply that you can use transition modes using something other than the mode attribute. Plus, this way, if we _do_ provide additional ways to specify the transition mode in the future, then we don't have to come back and update this since it just links to that section. 馃檪

Was this page helpful?
0 / 5 - 0 ratings

Related issues

richardtallent picture richardtallent  路  4Comments

jgtorrejon picture jgtorrejon  路  5Comments

webryan picture webryan  路  4Comments

philoyou11 picture philoyou11  路  4Comments

ankitsinghaniyaz picture ankitsinghaniyaz  路  4Comments