How to make a slide animation for the function $ state.go in an ionic structure?

Question

How to make a slide animation for the function $ state.go in an ionic structure?

I want to make a slide-in-up animation for one of my states. And, as I see it, this is impossible, or I do not know how to do it. Does anyone know how to do this?

I did smth. eg:

<html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Tabs Example</title> <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet"> <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script> </head> <body> <ion-nav-bar class="nav-title-slide-ios7 bar-positive"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view animation="slide-in-up"></ion-nav-view> <script id="templates/tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="Home" icon="ion-home" href="#/tab/home"> <ion-nav-view name="home-tab" animation="slide-in-up"></ion-nav-view> </ion-tab> </ion-tabs> </script> <script id="templates/home.html" type="text/ng-template"> <ion-view animation="slide-in-up" title="Home"> <ion-content class="padding"> <p> <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a> </p> </ion-content> </ion-view> </script> <script id="templates/facts.html" type="text/ng-template"> <ion-view animation="slide-in-up" title="Facts"> <ion-content class="padding"> <p>Polar bears are left handed.</p> <p><a class="button icon ion-home" href="#/tab/home">Home</a></p> </ion-content> </ion-view> </script> </body> </html>

And JS like this:

 angular.module('ionicApp', ['ionic']) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html", controller: 'HomeTabCtrl' } } }) .state('tabs.facts', { url: "/facts", views: { 'home-tab': { templateUrl: "templates/facts.html" } } }); $urlRouterProvider.otherwise("/tab/home"); }) .controller('HomeTabCtrl', function($scope) { console.log('HomeTabCtrl'); });