[Question] How to do a custom page transition animation the right way?

[Vall]

Hello,

I’m building a Onsen UI 2 app and I have a question regarding implementing custom page transitions. Could someone give me a rough step-by-step guide (or a tutorial if one exists? A glimpse of code doing something similar?) as to how to do it?

Something in the lines of:

1. create CSS
2. create Animation object (what parameters does it take?)
3. attach CSS classes to each animation step (what steps are there?)
4. apply animation object to page transition

Etc. (I know how to create it in just CSS/JS, looking for how to best implement it in Onsen)

I want to make an animated page transition so when a user clicks on an icon a white circle extends to fill the screen, then the page is loaded. Same thing in reverse with popPage(). There are some nuances to the animation so I’m trying to understand the mechanism, so I can adapt accordingly.

I’ve seen https://onsen.io/blog/css3-transitions-smooth-animations/ and it’s great but the code doesn’t exactly say how to operate each step.

I know I can use prepush/prepop and postpush/postpop, but is there a better way to do that? Or has anyone seen a tutorial for something similiar. Google doesn’t help much.

I also know I can create my own animation, fire it and then fire pushPage() when the animation is done. Is this the right way?

Thank you very much,
v

[munsterlander]

@Vall Would this thread help any? https://community.onsen.io/topic/273/custom-navigation-animation-fall-drop/3

[Fran Diox]

@Vall I want to write a guide on custom animations but still need to prepare some stuff before that. If you are interested in creating custom animations for ons-navigator right now you would need to see the other existing animations as examples. They are located here: https://github.com/OnsenUI/OnsenUI/tree/master/core/src/elements/ons-navigator

Basically, animator.js creates an interface for navigator animators called NavigatorTransitionAnimator. Every animator must extend this interface and overwrite push and pop methods at least. You can check how it is done in the other animators, from a simple one like ios-fade-animator to the most complex one ios-slide-animator. All of these examples are made in ES2015 with classes.

From rc.18 (released yesterday) we are exposing every animator (more info in this issue) and a new extend method, so another possibility to create animators would be as follows:

var customAnimator = ons.NavigatorElement.animators['none'].extend({
  push: function(enterPage, leavePage, callback) {
     // do some fancy stuff for pushPage
    callback();
  },
  pop: function(enterPage, leavePage, callback) {
     // do some fancy stuff for popPage
    callback();
  }
});

// Register the animator
ons.NavigatorElement.registerAnimator('customAnimatorName', customAnimator);

// Use it
myNavigator.pushPage('page.html', {animation: 'customAnimatorName'});

Both enterPage and leavePage are supposed to be attached inside ons-navigator element by the time these methods are called. In order to perform CSS transitions we use animit.js (it’s currently attached to the global scope, window.animit, although it will probably change to ons.animit soon). You can check the other animators to see examples about how to use animit.

[Vall]

@munsterlander , @Fran-Diox - Thank you very much, got a hang of it and getting some work done here. :) Thanks!