I try to mix Meteor 1.3 and FlowRouter with OnsenUI 2 Vanilla JS. 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 so I decide to use FlowRouter global triggers based on this: https://github.com/kadirahq/flow-router#triggers
This is my layout with navigator:
<template name="App_body">
<body>
<ons-navigator id="myNavigator"></ons-navigator>
{{> Template.dynamic template=main}}
</body>
</template>
this is my router.js:
FlowRouter.triggers.enter([enterPage]);
FlowRouter.triggers.exit([exitPage]);
function enterPage(context) {
// context is the output of `FlowRouter.current()`
console.log("enter new route");
var options = {
animation: 'slide' // What animation to use
};
var myNavigator = document.querySelector("#myNavigator");
myNavigator.pushPage(context.route.name, options);
}
function exitPage(context) {
// context is the output of `FlowRouter.current()`
console.log("exit current route");
}
but it retu below error:
TypeError: myNavigator is null
You can see complete code here for reproduce: https://github.com/MeteorDemoApps/OnsenUI2JS-demo
Just uncomment enterPage function commented lines.