Explicit duration for <transition>

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' }">

[yyx990803]

Closed via #4857