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');
});