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.

[Traxo7]

@​NonPolynomial's workaround doesn't work well without display: inline-block; i.e. for vertical lists

https://codepen.io/anon/pen/jKQJzy

[eric-2d]

I was able to achieve a satisfying result for my needs by using:

v-leave-active {
  display: none;
}

instead of the position trick

https://codepen.io/anon/pen/JxyxeV

[TuringJest]

I'm trying to build an Isotope Grid style component but I'm also running into some issues. Especially with leaving-elements blocking incoming elements which causes a jump after they left.

Adding position: absolute to the active class does help, but now leaving-elements will not transition properly (set position relative to absolute in the attached example to see what happens).

Also, there is some really interesting behavior if the move transition is not set with position: absolute on the active transition. All leaving elements will move to an absolute position (try to focus on a leaving element otherwise it's hard to notice).
Pretty mysterious as CSS transitions don't apply to the position attribute. Is that intended behavior @yyc990803?

Here is how it looks like with isotope

And here is my example

Any ideas on how to solve it?

[raf202]

Here's what I did so it doesn't take up space when it appears

.fade-enter-active {
  transition-delay: 200ms;
  animation: delayShow 200ms normal forwards step-end;
}

@keyframes delayShow {
  0% {
    position: absolute;
  }
  100% {
    position: static;
  }
}