aholachek / react-flip-toolkit

A lightweight magic-move library for configurable layout transitions
MIT License
4.02k stars 135 forks source link

Doesn't work as expected with nextJS "Image" component and added "sizes" prop #211

Open michalk91 opened 1 year ago

michalk91 commented 1 year ago

The animation between the element on the page and the element in the modal. I am using potralKey. When i add prop "sizes" to element on page with value other than "100vw" animation doesn't work on first click in prod mode (in dev mode works fine). After second and every next one click animation works fine. It seems to me that reactflip measures sizes too early. With normal "img" tag it's the same problem. Doesn't work with "sizes" prop. It is possible to do that works with sizes prop? How can i fix that? Thanks for Your help and best regards!

Code: ` <Flipped onStartImmediate={(e) => ( (e.style.zIndex = "10"), (e.style.position = "relative") )} onComplete={(e) => ((e.style.zIndex = ""), (e.style.position = ""))} flipId={lightboxImgID}

{alt}

`

NextJS: 13.4.2, React: 18.2.0, React-flip-toolkit: 7.1.0. I use lastest nextImage version