Allow mode for transition-group

[rightaway]

The standalone demo repo https://github.com/rightaway/demo shows the issue. If you click the message1 button once and then click it again, the second message1 notification appears and then the first one disappears. This is what mode=out-in is meant to solve for the transition tag, but there's no equivalent for transition-group. It leads to a very unattractive transition effect.

In this example I could use transition mode="out-in" instead of transition-group (in https://github.com/rightaway/demo/blob/master/src/Notify.vue#L3) except for the fact that if you click the message1 button and then the message2 button, Vue gives an error saying I need to use transition-group.

[simplesmiler]

When dealing with multiple "places for item", the notion of transition mode is unclear. Does out-in mean that there should be only one animated item at every moment? Or does it mean that all incoming items should be batched and deferred until there are no outgoing ones? Or does it mean that items "within" the same key should follow the regular rules of transition mode? All this meanings converge into one when dealing with a single "place for item".

[rightaway]

I think it would mean that all removals happen before any additions. In my example it shows that the new item gets added before the existing one gets removed, so more items than intended appear at the same time.

[qianjiahao]

I got the warning from the transition-group , it's warning me to add the key into the child item and actually key was already here, do you meet some problems ?

Here is code picture:

and warning is :

[Vue warn]: children must be keyed:

[jeerbl]

As @yyx990803 wrote in the changelog of version 2.1.7, you need to add position: absolute to v-leave and v-leave-active classes so that elements leaving the floor have no impact on the new ones coming.

Personally I created a absolute class which makes elements having it in absolute position, and I added this absolute class to the leave-class and leave-active-class attributes.

Hope this will work for you guys.

Jerome

[mondaychen]

I think transition mode in group can be more complicated than simple "in-out" and "out-in". For example, sometimes you want the items to be out one by one, sometimes you want them to be out all together.

[NonPolynomial]

I know thats just a workaround, but you could use the CSS transition-delay

• for mode out-in use the enter-active class
• for mode in-out use the leave-active class

e.g.

.slider-item {
  display: inline-block;

  &.slider-enter-active,
  &.slider-leave-active {
    transition: opacity .3s;
  }

  &.slider-enter-active {
    transition-delay: .5s;
  }

  &.slider-enter,
  &.slider-leave-to {
    opacity: 0;
  }
}

[yyx990803]

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.