add OnsenUI transition for route change

[cyclops24]

Now anything works well but I want add transition animation for route change. OnsenUI has this feature as this: https://onsen.io/v2/docs/js/navigation.html But I don't now what is the best place for start mix OnsenUI and FlowRouter. Maybe a good point to start is a onAfterAction hook or something like this.

Based on @johncodesigns help I want use triggers:

FlowRouter.route('/home', {
// calls just before the action
triggersEnter: [trackRouteEntry],
action: function() {
// do something you like
},
// calls when when we decide to move to another route
// but calls before the next route started
triggersExit: [trackRouteClose]
});

Related to this link: https://github.com/kadirahq/flow-router#triggers

[cyclops24]

add some global trigger here: https://github.com/MeteorDemoApps/OnsenUI2JS-demo/commit/be29cd85d9bd75983c3eb680851a12e3eb382330

[cyclops24]

@frankdiox do you have any suggestion for me about this task?

[cyclops24]

Guys, I need you opinion about this. What is the best way to add OnsenUI navigator transition to FlowRouter trigger?? I need to know best practice and others approach.

[frandiox]

@cyclops24 Hey! Some time ago I wrote an article about integrating Onsen UI v1 with Angular's ui-router. The navigator in Onsen UI v2 is almost the same, just a bit simpler. I think you can find something useful here.

Basically I used onEnter event and similar, so probably your approach with triggersEnter and triggersExit works.

We've been talking in the team about separating the animations from state changing in the navigator so theoretically you can call the animations from outside, but this is obviously not done yet and it may take time, if we ever implement it :sweat_smile:

[cyclops24]

@frankdiox I think mixing OnsenUI navigator with Meteor FlowRouter will be a bit complicated because triggersEnter called before page render and at that time Navigator not created yet and it's make error that I asked in OnsenUI forum from other hand we have a OnsenUI template as ons-template that will be placed under Meteor template as template like below and I think it's a little dirty way:

<template name="index">
    <ons-template id="index">
...

If animation separate from navigator then any frameworks can use own router approach and all things become more simpler. Are you (OnsenUI team) want to separate this for version 2 ?

[frandiox]

@cyclops24 Version 2 is already in release candidate so we won't do anything else for 2.0.0. This may or may not come for 2.1. In any case, I think most of mobile apps are quite simple in general and they just need basic routing (like ons-navigator provides). Is there a way to use this without FlowRouter? I don't really know too much about Meteor or Blaze :/

[cyclops24]

@frankdiox Oh man, You say another approach :+1: Maybe we can completely remove FlowRouter and use ons-navigator at all. If ons-navigator fit to my needs I can simply remove FlowRouter. I test and say result here. Thanks for new idea :wink:

[cyclops24]

@frankdiox I try below code but it always show second page by default that it's wrong.

<ons-navigator id="myNavigator" page="page1.html"></ons-navigator>

    <ons-template id="page1.html">
        <ons-page id="page1">
            <ons-toolbar>
                <div class="center">Page 1</div>
            </ons-toolbar>

            <p>This is the first page.</p>

            <ons-button id="push-button">Push page</ons-button>
        </ons-page>
    </ons-template>

    <ons-template id="page2.html">
        <ons-page id="page2">
            <ons-toolbar>
                <div class="left"><ons-back-button>Back</ons-back-button></div>
                <div class="center"></div>
            </ons-toolbar>

            <p>This is the second page.</p>
        </ons-page>
    </ons-template>

This is exactly same as OnsenUI docs example. Do you have any idea about this?

[frandiox]

@cyclops24 The second page? Is anything triggering a pushPage? What happens if you actually remove the second page and only have the first one?

[cyclops24]

Hi @frankdiox , Yeh second one, it seems it's always show the last page. For example if only one page, it show first page and if I have three or four page it's show last one always. I still haven't any pushPage. Frank you can see my code here: https://github.com/MeteorDemoApps/OnsenUI2JS-demo/blob/358ec78a3d502142cbb9167fe78eb78d2656be50/imports/ui/pages/testNavigator.html

If you have time also you can see it yourself. Just run curl https://install.meteor.com/ | sh then clone this repo and run simple meteor run command to see issue on http://localhost:3000/.

[frandiox]

I don't really know how template works in meteor. ons-template must be part of index.html at the beginning of the app, otherwise it does not work. ons-template is just a handy way to create new content within index.html, but you can put those pages in different files by just removing ons-template tags. When you want to push a page you use the path of the file. Let's say you have www/index.html and www/views/page1.html, then you use pushPage('views/page1.html').

Other things that you can try is to put the first ons-page directly inside ons-navigator tags. I think that works well for the very first page.

Another thing, you can directly push HTML since pushPage-like methods accepts a parameter options.pageHTML. Therefore, if you want you can use your normal template tags with pages as long as you pass the content in that parameter. I think we will be changing ons-template related stuff in the core soon in order to make all of this easier.

I hope you can find some useful information here!

[cyclops24]

@frankdiox is any complete list of component demo exist for OnsenUI 2? Something like this for Meteoric124 (Blaze version of Ionic 1.2.4): http://meteoric-demo.com/ If OnsenUI have something like this then I can port it to Meteor and I think it's prevent many of issues and conflicts between both side.