Transition when composition complete

[David Calleja]

Hi, I have been using durandal for a few weeks now and I find it no less than brilliant. There is one issue however.

I have some widgets which create carousels and/or grids using the isotope plugin. Since page transitions occur independently of their contents, the page transitions in with the widgets still being built, resulting in the usual 'on dom ready' snap.

Is there an easy way I can get the pages to transition in when the contents are composed?

Thanks

[Garry Taylor]

Hi David. You could try initialising the widgets on the compotionComplete callback. However I thing this is only called once so might not be the right solution.

http://durandaljs.com/documentation/Interacting-with-the-DOM.html

[David Calleja]

Hey Garry, thanks for your reply. Unfortunately composition complete is fired after the transition.. so still gets that flicker :(

[Garry Taylor]

Hi David, I have tried playing around with this and can't find any solution.

I have tried returning a deferred promise that's resolved based on the callback for isotope. I have also triggered this on the isotope layout complete event. 

I can get this to work using the "attached" Durandal composition callback however isotope does not play well and can't calculate the correct width/hight for elements.. so not a solution at all.

I will keep working on this and let you know if I come up with anything. 

[David Calleja]

Hey Garry, really appreciate your help on this. I did find one point of interest while going through the durandal code. In the composition component, 'endcomposition' fires all callbacks in reverse order, the main page compositioncomplete callback being the last. Tried finding my way around it but since all compositions use this component, it got complicated....thanks again!

[Garry Taylor]

No probs. Got to go and do family stuff now but will have another look when I get back.
I tried a jquery ready with the Id of the widget and that kind of worked.

[Chason Choate]

I would be interested in how this would work. Possibly editing the transition code durandal/transitions/entrance and add a transitionStart which returns a promise and starts the transition once the promise is resolved. Although, i'm not sure how isotope will work with a hidden element, but you can give it a shot.

Note: Transitions won't run if you route back to the same page.

Somewhat similar thread I created: https://groups.google.com/forum/#!topic/durandaljs/S65gGohyD2E

[Garry Taylor]

Hi David, I am sorry but I can't get this to work correctly yet. There is an even bigger problem. Isotopes uses routes to assign actions for filtering, ordering the items. This used the url navigation that conflicts with Durandal router.js. If you try to run any of the example code your get the Durandal/router.js error "Route not found" and the isotope method is not run.

I will keep working on this and see if I can find a solution. There might be a way to allow a give route (for example an #isotope*details) to work and allow isotope to trigger the events.

Will post more as I get it :)

The obvious (but a little lame) solution is to get the CSS to render the layout to match the end look and feel you would get by default. This would give you a splash/loading view that can then be modified and stop the DOM snap.. This is how their current samples work...

[David Calleja]

Hmm tricky isn't it.

Really appreciate your help.

[David Calleja]

Hey everyone, I ended up solving this but it required a re-write of the composition class in durandal. Nothing major but a re-factor none the less. What is the procedure for forwarding these changes for approval? Maybe they could be included in a future version of durandal.

Thanks

[GH]

David -- would you mind posting this code somewhere?  I'd be curious to see what changes you made as it sounds very close to an issue we are also trying to work around.

Thanks.