question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unexpected delay between two v-transition

See original GitHub issue

I’m stuck on an issue that cause awkward pages transitions using v-transition and v-view on poor memory devices (tested on an iPad 4th gen so far).

I am translating full-viewport views to -100% (v-leave) 100% (v-enter), and it works fine on desktop.

But on the device, there is a delay on the v-leave that reveal a blank between the two views.

I guess this is caused by the time it takes the iPad to insert the view in the dom, but I tried with multiple v-show instead of v-view but unfortunately, same behavior here (maybe a shorter delay).

Is it an issue or a design mistake in my app pages transitions? How could I link two v-transition to wait each other to avoid this blank gap between them?

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
rayfrancocommented, Aug 13, 2014

Thanks a lot for watching again, this was it! It works nice on every devices now. Closing this issue with a happy smile.

0reactions
yyx990803commented, Aug 12, 2014

Took another look and figured out it was indeed caused by Vue! The enter transitions are batched with a nextTick delay because we want to make sure to trigger only one forced layout, while the leave transitions are not. That’s why there is a one frame difference between the two. It should now be fixed in 1e01c18.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Css transition - unexpected delay - Stack Overflow
When you click 'toggle' and the div is expanded, the height of the div is reduced in 2 steps... first to it's "auto"...
Read more >
transition-delay - CSS: Cascading Style Sheets | MDN
The transition-delay CSS property specifies the duration to wait before starting a property's transition effect when its value changes.
Read more >
Unexpected transition delay - Get Help - Vue Forum
Hi, I am in the process of making a reusable slide transition component. It needs to be flexible without creating a big performance...
Read more >
CSS Transitions: Delays and Multiple Properties - Egghead.io
Learn how to spice up your CSS Transitions using delays and compound transition rules that specify independently varying rules for ...
Read more >
Why Do Kids Have Trouble With Transitions?
So perhaps it's not surprising that children often find it difficult to make transitions between activities, places and objects of attention ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found