Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Explicit duration for <transition> #4371

Closed
Akryum opened this issue Dec 2, 2016 · 9 comments
Closed

Explicit duration for <transition> #4371

Akryum opened this issue Dec 2, 2016 · 9 comments
Labels
feature request intend to implement

Comments

@Akryum
Copy link
Member

Akryum commented Dec 2, 2016

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
Copy link
Member

posva commented Dec 2, 2016

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
Copy link

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
Copy link

@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
Copy link
Member Author

Akryum commented Jan 13, 2017

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

@lunelson
Copy link

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
Copy link

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
Copy link
Member Author

Akryum commented Jan 13, 2017

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

@lunelson
Copy link

Certainly

@yyx990803 yyx990803 mentioned this issue Jan 22, 2017
Closed
@Akryum Akryum mentioned this issue Feb 5, 2017
Merged
yyx990803 pushed a commit that referenced this issue Feb 15, 2017
@yyx990803
#4371 - Explicit transition durations (#4857)
0598ab0 
* Add transition explicit duration

* Fix tests for explicit transition duration

* Tweaks & default to milliseconds

* Better tests

* Better test for change value case

* Fix transition duration tests

* Better flow typing

* Fix transition test

* Revert "Fix transition test"

This reverts commit db75b3801ed11182119c78ebae87f40a62803714.

* Fix transition test


Revert "Fix transition test"

This reverts commit db75b3801ed11182119c78ebae87f40a62803714.
Fix transition test

* Better flow types

* Warn message

* Better prop handling

* Better flow typings

* adjustments
@yyx990803
Copy link
Member

Closed via #4857

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request intend to implement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@yyx990803 @posva @lunelson @TheDutchCoder @Akryum