question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Transition-group mode is not supported

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
chrisvfritzcommented, May 17, 2018

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

1reaction
chrisvfritzcommented, May 17, 2018

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. 🙂

Read more comments on GitHub >

github_iconTop Results From Across the Web

Allow mode for transition-group #3974 - vuejs/vue - GitHub
This is what mode=out-in is meant to solve for the transition tag, ... Transition-group mode is not supported vuejs/v2.vuejs.org#1619.
Read more >
Vue transition-group not working - Stack Overflow
When using transition-group in vue.js the key of the items should be a unique property. Using the index from the v-for would work...
Read more >
Transition-group mode workaround - Get Help - Vue Forum
As I understand, modes are not available using transition-group, like they are with transition. Transition has out-in mode, to get the new ...
Read more >
SwitchTransition - React Transition Group
A transition component inspired by the vue transition modes. You can use it when you want to control the render between state transitions....
Read more >
Enter/Leave & List Transitions - Vue - w3resource
<transition name="component-fade" mode="out-in"> <component ... The <transition-group> not only animate entering and leaving, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found