Allow mode for transition-group

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.

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