search

maoberlehner / transition-to-height-auto-with-vue

This is an example project for the following article: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
105 stars 37 forks source link

Force dom re-render to prevent `flip` #1

Closed QoVoQ closed 5 years ago

QoVoQ commented 6 years ago

Firs of all, thanks for your sharing.I've learned a lot from it.

But I found your transition height demo has a litte problem: Animation might flip occasionally.(Chrome Version 65.0.3325.181 (Official Build) (64-bit)) ezgif com-optimize

And I found the solution to that is forcing the height-animating-element to re-render(by using getComputedStyle(ele).height) before the animation starts.

And I know forcing re-render may lead to performance issues. But we can make our choice.

Here is the fixed example: https://jsbin.com/cecazuxavo/edit?html,css,js,output And the problemtic example: https://jsbin.com/posawecibi/1/edit?html,css,js,output

maoberlehner commented 6 years ago

Hey @QoVoQ thanks for your feedback! I'll look into it.

maoberlehner commented 5 years ago

Thank you @QoVoQ for providing the solution to this problem! I've updated the code and the article accordingly!