layout calculations in beforeEnter hook will cancel entering animation for transition elements

[kingofwhales]

Version

2.5.13

Reproduction link

https://codepen.io/asiankingofwhales/pen/zpQBQM

Steps to reproduce

1. Click Toggle Slide to enable transition, which is currently not working
2. If you remove the scrollTop layout calculations in beforeSlideEnter, the element will slide in smoothly. Now the transition is working.

What is expected?

Gradual sliding in from right

What is actually happening?

With scrollTop calculations, the entering transition is gone.

---

I have found that wrapping the child component in an additional div will solve this problem. However, this seems like a hack.

I apologize if this is not a bug. I have raised this questions in forum, discord and stackoverflow but no one is able to answer. So I have started to think that it might be a bug.

Stackoverflow Link

https://stackoverflow.com/questions/48420077/beforeenter-hook-on-child-component-transition-cancelled-by-scrolltop-layout-cal

[posva]

mmh, weird. We may be doing something wrong but here is a version without Vue (mimics what Vue does) that also fails but only on Chrome: http://codepan.net/gist/bf91a55172b1302acc2ade0681e9fbd3
I think that by doing a layout calculation, it may be enforcing the values too early and thus not triggering the transition

[kingofwhales]

This is truly strange.. Maybe a chrome bug?

The vue example does have the same issue on safari and firefox. For now, my solution is just to wrap the child component in an additional div, which seems to solve the problem. But I wonder if this is a bug..

Solution: https://codepen.io/asiankingofwhales/pen/baPWYQ?editors=1010

[LinusBorg]

maybe chrome just triggers a transitionend event when it does a layout calcultion?

[kingofwhales]

The vue example isn't limited to chrome only though. It's happening in firefox and safari too.

Being able to solve this by wrapping the child component in another parent div makes me think that this might be a vue bug too.. For now, this is my solution..

[kingofwhales]

thanks a lot!!!! 😝😝😝

感谢大神们！！！！！