Tab animations can't get it to work


#1

Hi there …i can’t seem to get any tab animations to work…any help much appreciated.

<!-- compiled css output -->
<link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<ion-nav-view animation="slide-left-right"></ion-nav-view>

<ion-tabs class="tabs-positive">
    <ion-tab icon="ion-home" ui-sref="home">
        <ion-nav-view name="home"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-gear-a" ui-sref="about">
        <ion-nav-view name="about"></ion-nav-view>
    </ion-tab>     
    <ion-tab icon="ion-help" ui-sref="help">
        <ion-nav-view name="help"></ion-nav-view>
    </ion-tab>       
    <ion-tab icon="ion-ios7-clock" ui-sref="contact">
        <ion-nav-view name="contact"></ion-nav-view>
    </ion-tab>                
</ion-tabs>


<script type="text/ng-template" id="home.html">
    <ion-view title="Home">
        <ion-content padding="true">
            <h2>Home Page</h2>
              <p>
                <a class="button icon icon-right ion-chevron-right" href="#/about">Scientific Facts</a>
              </p>
        </ion-content>
    </ion-view>
</script>

<script id="about.html" type="text/ng-template">
    <ion-view title="About">
        <ion-content class="padding">
          <h3>Create hybrid mobile apps with the web technologies you love.</h3>
          <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
        </ion-content>
    </ion-view>
</script>

<script type="text/ng-template" id="help.html">
    <ion-view title="Help">
        <ion-content padding="true">
            <h2>Using the app</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
        </ion-content>
    </ion-view>
</script>

<script type="text/ng-template" id="contact.html">
    <ion-view title="Contact Us">
        <ion-content padding="true">
            <h2>Using the app</h2>
            <p>Lorem Fcia quasi exceores consectetur veritatis sint?</p>
        </ion-content>
    </ion-view>
</script>    

Controller code

var app = angular.module(‘ionicApp’, [‘ionic’]);

app.config(function($stateProvider, $urlRouterProvider) {

$stateProvider

.state('home', {
    url: "/home",
    views: {
        home : {
        templateUrl: "home.html",
        }
    }
})
.state('about', {
    url: "/about",
    views: {
        about : {
        templateUrl: "about.html"
        }
    }
})
.state('help', {
    url: "/help",
    views: {
        help : {
        templateUrl: "help.html"
        }
    }
})
.state('contact', {
    url: "/contact",
    views: {
        contact : {
        templateUrl: "contact.html"
        }
    }
});    

$urlRouterProvider.otherwise('/home');

});