OnsenUI | Working With Page Transitions

Written by on April 9, 2015

OnsenUI | Working With Page Transitions

I covered this topic briefly in one of my previous articles. Unfortunately, I don’t think it was enough. This article will hopefully cover much more of this topic; everything you need to know about page navigation, page transitions and how to animate them.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Table of Contents

[spoiler title=” Click here if you want to see other tutorials, this is the 8th tutorial out of 12 total.”]

[/spoiler]

Working example

Play with this article for now, we’ll talk details further down the line.

Demo

Embeded working example:
OnsenUI Page transitions

HTML
<html>

<head>
  <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <script src="http://onsenui.io/OnsenUI/build/js/onsenui.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body ng-controller="ListCtrl">

  <ons-navigator animation="slide" var="app.navi">
    <ons-page>
      <ons-toolbar class="toolbar-black">
        <div class="center">First Page</div>
      </ons-toolbar>
    
      <ons-row class="profile-wrapper" style="padding: 10px;">
        <button class="button button--large" ng-click="changePageNoAnimation()">Programmatically change page</button>
      </ons-row>    
    
      <ons-row class="profile-wrapper" style="padding: 10px;">
        <button class="button button--large--cta" ng-click="changePageWithAnimation()">Programmatically change page with animation</button>
      </ons-row>    
     
    </ons-page>   
  </ons-navigator>    
   
  <ons-template id="view.html">
    <ons-page ng-controller="ViewCtrl">
      <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>        
        <div class="center">Second Page</div>
      </ons-toolbar>

      <ons-row class="profile-wrapper" style="padding: 10px;">
        <button class="button button--large--cta" ng-click="goBack()">Go Back</button>
      </ons-row>  

    </ons-page>
  </ons-template>
  
</body>
</html>
JavaScipt
var module = ons.bootstrap('my-app', ['onsen']);

module.controller('ListCtrl', function($scope) {

  $scope.changePageNoAnimation = function(){ 
    app.navi.pushPage("view.html", { animation: "none"});
  }  
  
  $scope.changePageWithAnimation = function(){
    app.navi.pushPage("view.html", { animation: "lift", movieid: '1' });
  }    
});

module.controller('ViewCtrl', function($scope) {
  var page = app.navi.getCurrentPage();
  console.log(page.options.movieid);
  
  $scope.goBack = function(){
    app.navi.popPage();
  }     
});

Programmatically changing page

Before we can talk about this topic any further make sure your application has at least two pages. Those pages must have defined ons-navigator directive. For those of you who skipped my previous tutorials ons-navigator is a component that provides page stack management and navigation (it does not need to have a visible content).

Navigator needs to have defined var attribute. It will proviede JavaScript with direct connction to ons-navigator directive.

It can be used with any event to programmatically trigger a page change, here’s an example:

<ons-row class="profile-wrapper" style="padding: 10px;">
	<button class="button button--large" ng-click="changePageNoAnimation()">Button</button>
</ons-row>    

<ons-row class="profile-wrapper" style="padding: 10px;">
	<button class="button button--large--cta" ng-click="changePageWithAnimation()">Button</button>
</ons-row>  

When button is clicked, it will trigger function called changePageNoAnimation. This function needs to be defined in a controller:

$scope.changePageNoAnimation = function(){
    app.navi.pushPage("view.html");
}  

$scope.changePageWithAnimation = function(){
    app.navi.pushPage("view.html", { animation: "lift", movieid: id });
}  
Continue Reading

Categories

1 thought on “OnsenUI | Working With Page Transitions”

  1. Hi,

    I’ve been wondering how to return to the first page successfully. I had used app.navi.resetToPage(‘index.html’) where index.html is the actual file name. It did return to the first page, but the display was messed up. All pages are displayed in one page.

    I’ve been pulling my hair out this weekend because of this issue -,-

Leave a Reply