Ionic animation failure

  node.js, question

A small effect written with angular ui router. The animation inside has no effect. I don’t know whether it is the reason for my version or other reasons.
Html page is as follows

<!  DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="css/ionic.css">
 <!  -- <link href="//cdn.bootcss.com/ionic/1.3.1/css/ionic.css" rel="stylesheet">-->
 
 </head>
 <body ng-app="wechat">
 
 <ion-nav-view ></ion-nav-view>
 <script src="js/ionic.bundle.js"></script>
 
 <script>
 angular.module('wechat',['ionic','ui.router'])
 .controller('one',function($scope){})
 .config(function($stateProvider, $urlRouterProvider){
 $urlRouterProvider.otherwise("/tab/m");
 $stateProvider
 .state("tab",{url:"/tab",templateUrl:"view/tab.html", controller : "one"})
 .state("tab.m",{
 url:"/m",
 views:{
 "tab-m":{
 templateUrl:"view/childPage1.html"
 bracket
 bracket
 })
 .state("tab.t",{
 url:"/t",
 views:{
 "tab-t":{
 templateUrl:"view/childPage2.html"
 bracket
 bracket
 })
 .state("tab.f",{
 url:"/f",
 views:{
 "tab-f":{
 templateUrl:"view/childPage3.html"
 bracket
 bracket
 })
 .state("tab.i",{
 url:"/i",
 views:{
 "tab-i":{
 templateUrl:"view/childPage4.html"
 bracket
 bracket
 })
 
 
 })
 </script>
 </body>
 </html>

Tab page content is as follows

<ion-tabs ng-controller="one" class="tabs-stable tabs-icon-top">
 < ion-tab ui-sref="tab.m" title= "information" icon-on = "ion-IOs-chatbubble" icon-off = "ion-IOs-chatbubble-outline" >
 <ion-nav-view animation="slide-left-right" name="tab-m"></ion-nav-view>
 </ion-tab>
 < ion-tab ui-sref="tab.t" title= "address book" icon-on = "ion-IOs-list" icon-off = "ion-IOs-list-outline" >
 <ion-nav-view animation="slide-left-right" name="tab-t"></ion-nav-view>
 </ion-tab>
 < ion-tab ui-sref="tab.f" title= "discovery" icon-on = "ion-IOs-eye" icon-off = "ion-IOs-eye-outline" >
 <ion-nav-view animation="slide-left-right" name="tab-f"></ion-nav-view>
 </ion-tab>
 < ion-tab ui-sref="tab.i" title= "me" icon-on = "ion-IOs-pulse-strong" icon-off = "ion-IOs-pulse" >
 <ion-nav-view animation="slide-left-right" name="tab-i"></ion-nav-view>
 </ion-tab>
 </ion-tabs>

The routing effect is realized. But there is no animation.
The contents of the four pages jumped are

< div style="width: 100 percent;  Height: 100 percent;  background-color: #0c60ee">11111111111</div>

This is the version in boundle.

/*!
 * ionic.bundle.js is a concatenation of:
 * ionic.js, angular.js, angular-animate.js,
 * angular-sanitize.js, angular-ui-router.js,
 * and ionic-angular.js
 */
 
 /*!
 * Copyright 2015 Drifty Co.
 *  http://drifty.com/
 *
 * Ionic, v1.3.0
 * A powerful HTML5 mobile app framework.
 *  http://ionicframework.com/
 *
 * By @maxlynch, @benjsperry, @adamdbradley <3
 *
 * Licensed under the MIT license. Please see LICENSE for more information.
 *
 */

The ionicss version is as follows

/*!
 * Copyright 2015 Drifty Co.
 *  http://drifty.com/
 *
 * Ionic, v1.3.0
 * A powerful HTML5 mobile app framework.
 *  http://ionicframework.com/
 *
 * By @maxlynch, @benjsperry, @adamdbradley <3
 *
 * Licensed under the MIT license. Please see LICENSE for more information.
 *
 */
 /*!
 Ionicons, v2.0.1
 Created by Ben Sperry for the Ionic Framework,  http://ionicons.com/
 https://twitter.com/benjsperry   https://twitter.com/ionicframework
 MIT License:  https://github.com/driftyco/ionicons
 
 Android-style icons originally built by Google’s
 Material Design Icons:  https://github.com/google/material-design-icons
 used under CC BY  http://creativecommons.org/licenses/by/4.0/
 Modified icons to fit ionicon’s grid from original.
 */

-I don’t know where the problem is. Animation doesn’t come out. Switching pages have no animation

Tab tags are not animated. Furthermore, ion-nav-view has no animation attribute.

Since each tab corresponds to one ion-nav-view, there is no animation effect when switching multiple ion-nav-views. Just like when you switch the “Address Book” and “Discovery” buttons in WeChat inside, it is the same.

If you set up a sub-page for a single ion-nav-view, it will have an animation effect when entering this sub-page. for example, wechat: on the “discovery” page, clicking “circle of friends” to enter will have an animation effect.

Add an instance code:

Routing settings:

$stateProvider
 .state("tab",{url:"/tab",templateUrl:"view/tab.html", controller : "one"})
 .state("tab.m",{
 url:"/m",
 views:{
 "tab-m":{
 templateUrl:"view/childPage1.html"
 bracket
 bracket
 }).state("tab.m.a",{
 url:"/m/a",
 views:{
 "tab-m":{
 templateUrl:"view/a.html"
 bracket
 bracket
 });

Then add a button in childPage1.html and set its jump route address to ui-sref=’tab.m.a’.
When you click the button, you can see the animation.

I hope you can help you.