Vue: Explicit duration for <transition>

[Akryum]

Proposed change

Add the option to pass the total transition duration in seconds wia a new prop:

<!-- Both enter and leave explicit total duration -->
<transition name="complex-animation" duration="1.5">
<!-- Specific enter and leave explicit total durations -->
<transition name="complex-animation" duration-enter="1.5" duration-leave="2">

What does it solves?

Here is an example transition that demonstrate that the duration automatically detected by Vue can be wrong because of nested css transitions with different durations or delays:

/* Modal */

.modal-enter-active {
  transition: opacity .3s;

  .modal-dialog {
    transition: opacity .3s .15s, transform .3s .15s;
  }
}

.modal-leave-active {
  transition: opacity .3s .15s;

  .modal-dialog {
    transition: opacity .3s, transform .3s;
  }
}

.modal-enter,
.modal-leave-active {
  opacity: 0;

  .modal-dialog {
    opacity: 0;
    transform: translateY(-40px);
  }
}

Here the transition should last .45 s, but Vue only detect the first transition duration .3s for the enter part.

[posva]

My 2 cents

An alternative to:

<transition name="complex-animation" duration-enter="1.5" duration-leave="2">

could be

<transition name="complex-animation" duration="{enter: 1.5, leave: 2 }">
<transition name="complex-animation" duration="{enter: '1500ms', leave: '2s' }">

[TheDutchCoder]

This would be great too for sub elements that might have a transition delay on them.

My preference would be something flexible like @posva suggested, so we have a little more (or full) control over the steps.

[lunelson]

@Akryum your example implies that there's a bug in the transitionend detection, which shouldn't be the case since its possible to check the target of the event... so is this a bug?

[Akryum]

No, the problem is nested transitions not being detected. I don't think it's a bug.

[lunelson]

Okay I see now. Animations have animationend, animationiteration, and animationstart events but Transitions only have transitionend... no way to determine when nested ones are finished. An explicit value on <transition/> is probably the best way

[lunelson]

Perhaps a hack would be to transition a non-changing property separately over .45s, to force the duration?

.modal-enter-active {
  transition: opacity .3s, color .45s; // assuming color doesn't change
  .modal-dialog {
    transition: opacity .3s .15s, transform .3s .15s;
  }
}

[Akryum]

It's what I currently do, but it's still a hack.

[lunelson]

Certainly

[yyx990803]

Closed via #4857