search

homerjam / angular-gsapify-router

Angular UI-Router animation directive allowing configuration of GSAP state transitions based on priority
http://homerjam.github.io/angular-gsapify-router/
MIT License
85 stars 16 forks source link

Not working with angular material #24

Closed flick36 closed 8 years ago

flick36 commented 8 years ago

In angular material it does'nt work if you have flex or layouts int he ui-view

homerjam commented 8 years ago

Please post an example and/or describe the issue in more depth as well as what steps you've taken to resolve it.

Thanks

luncht1me commented 6 years ago

The issue is with flex. I'm currently working on a project laid out with angular material, and all the ui-views and content are sized using flex. It may be as simple/tedious as adding flex-basis to each element that animates. But will let you know as I investigate.

Pretty much what happens, is as a view slides in, it's not the correct size, then once in place snaps to it's proper dimensions. If the same view is used in two different states, it'll also put them side-by-side and destroy the structure of the page until animations are finished. I'm 95% certain it's because of flex being used for layout.

homerjam commented 6 years ago

It's a little difficult to know what's happening without an example but you might want to try adding the ui-view directive to a consistently sized parent element (or adding a wrapper around the layout elements sized with flex).