Unexpected delay between two v-transition
See original GitHub issueI’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:
- Created 9 years ago
- Comments:7 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Thanks a lot for watching again, this was it! It works nice on every devices now. Closing this issue with a happy smile.
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.