zackbrown / famous-angular-ui-router

Simple demo of using ui-router with Famo.us/Angular
12 stars 7 forks source link

Surfaces accumulate on each navigation back and forth #4

Closed mrlund closed 9 years ago

mrlund commented 9 years ago

Each time I navigate from main to test the content accumulates. It is not too noticeable at first, because they're all on top of each other, but if you add other content, or inspect the page you'll notice that new surfaces are being added each time, the existing ones are never removed?

zackbrown commented 9 years ago

This was a bug in 0.3.0 that was (mostly) fixed by https://github.com/Famous/famous-angular/commit/269c6d646f008ada50c6acead77da7f9cd1ae153

I just dug into this a bit more, though, and it turns out that having both fa-animate-enter and fa-animate-leave on one element (e.g. this case with ui-view) is an edge case that causes clean-up to be inconsistent; specifically, it only happens on every other route change when toggling between two routes, and it could well lead to deeper messiness when there are more than two routes. So if you toggle between the routes in this demo a bunch of times @ 0.3.0, you will get 3 new surfaces every time, with no cap. As of https://github.com/Famous/famous-angular/commit/269c6d646f008ada50c6acead77da7f9cd1ae153, it would saturate at nine surfaces, but could have gotten worse with >2 routes. https://github.com/Famous/famous-angular/commit/269c6d646f008ada50c6acead77da7f9cd1ae153 is included in 0.4.0, which was released yesterday.

This is now better-fixed with https://github.com/Famous/famous-angular/commit/4e34a22fdc1a8f8a1a64be7ef5f2c81c1e4c21c1, where this demo will saturate at 6 elements (three of which are opacity: 0; this is an expected Famo.us artifact and is as good as it gets.) https://github.com/Famous/famous-angular/commit/4e34a22fdc1a8f8a1a64be7ef5f2c81c1e4c21c1 is NOT tagged in 0.4.0, so if you want the latest, you'll have to pull from master. At the very least, I would recommend updating to F/A 0.4.0, and I've updated famous-angular-ui-router-demo accordingly with https://github.com/zackbrown/famous-angular-ui-router-demo/commit/89b37bb69ea8242e726170583be2953f0ab32f80 .

Happy route-animating!