Documentation Questions

[dcworldwide]

Well done on the minimal design and transition state DSL. Very clean.

This package is a good fit for my project, however i'm concerned it may have limitations. I have setup transitions with IR, however i'm having issues. Could you please provide some guidance on the following? I think answers to these questions would be ideal for the docs.

Does the package execute in/out transitions in parallel? I.e. If viewing page A, I need to see the out transition of A run (i.e. scaleZ back), whilst B runs concurrently (slide from right to overlay A). From my testing, it seems A will run, followed by B. It isn't a smooth transition between the two views at all. I wonder if there are IR / uihook limitations / timing issues at play here? Struggling to understand the firing sequence of the uihooks.

Does the transition have issues if the views have different dimensions? I..e Flowing between A and B where A has a WxH of 1024x768 and B has a WxH of 2048x1024? In my case, i find that the transitioned view often renders in the wrong screen position initially (bottom of page). Then once the transition animation completes, it snaps into the correct position.

Thanks

[ccorcos]

I'm using Blaze's _uihooks to hook into blaze when nodes are pulled out of the DOM and inserted into the DOM.

https://github.com/ccorcos/meteor-transitioner/blob/master/lib/transitioner.coffee#L86

I'm also using Iron Router's reactivity to determine what route we're on so we can execute the correct transition.

As far as I know, page transitions are limited in Blaze to out-the-in animations. I've taken a liking to React recently which has much more capabilities here.

I'm not sure if the animation hiccup has much to do with the size of the view as opposed to the layout of the view. Perhaps try absolute positioning. Also, the issue may lie in the fact that this package wraps your entire view in a div.transitioner that has some CSS on it...

https://github.com/ccorcos/meteor-transitioner/blob/master/lib/transitioner.css

[dcworldwide]

Thanks for the feedback. I've just spent some time looking at my css. I can confirm that unless i specify the html/body height and width properties to be 100%, the transitions don't work as expected. In fact, the transitioner.div child are not rendered at all in this case.

To support pages that overflow, i've had to override the container div as follows:

.transitioner>div {
/height: 100%;/
width: 100%;
position: absolute;
overflow: scroll;
top: 0;
left: 0;
}

Took me a while to figure it out