Angular JS Simple Slide Animation using ngAnimate with Ui-Router
Submitted by nurhodelta_17 on Tuesday, January 23, 2018 - 23:20.
Getting Started
I've used CDN for Bootstrap, Angular JS, and Angular Animate so you need internet connection for them to work.index.html
This is the main view of our app.- <!DOCTYPE html>
- <html ng-app="app">
- <head>
- <meta charset="utf-8">
- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
- <link rel="stylesheet" type="text/css" href="style.css">
- </head>
- <body ng-controller="mainCtrl">
- <nav class="navbar navbar-default">
- <div class="container">
- <div class="navbar-header">
- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
- </button>
- </div>
- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
- <ul class="nav navbar-nav">
- </ul>
- </div>
- </div>
- </nav>
- <div class="container">
- </div>
- </body>
- </html>
Add Style
Add the ff CSS to trigger our slide animation. We name this as style.css- #views.ng-enter,
- #views.ng-leave {
- position:absolute; left:30px; right:30px;
- transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease;
- }
- #views.ng-enter {
- -webkit-animation:slideInRight 0.5s both ease;
- -moz-animation:slideInRight 0.5s both ease;
- animation:slideInRight 0.5s both ease;
- }
- #views.ng-leave {
- -webkit-animation:slideOutLeft 0.5s both ease;
- -moz-animation:slideOutLeft 0.5s both ease;
- animation:slideOutLeft 0.5s both ease;
- }
- @keyframes slideOutLeft {
- to { transform: translateX(-200%); }
- }
- @-moz-keyframes slideOutLeft {
- to { -moz-transform: translateX(-200%); }
- }
- @-webkit-keyframes slideOutLeft {
- to { -webkit-transform: translateX(-200%); }
- }
- @keyframes slideInRight {
- from { transform:translateX(200%); }
- to { transform: translateX(0); }
- }
- @-moz-keyframes slideInRight {
- from { -moz-transform:translateX(200%); }
- to { -moz-transform: translateX(0); }
- }
- @-webkit-keyframes slideInRight {
- from { -webkit-transform:translateX(200%); }
- to { -webkit-transform: translateX(0); }
- }
app.js
This contains our angular js script.- var app = angular.module('app', ['ui.router', 'ngAnimate']);
- app.config(function($stateProvider, $urlRouterProvider) {
- $urlRouterProvider.otherwise('/home');
- $stateProvider
- .state('home', {
- url: '/home',
- templateUrl: 'home.html'
- })
- .state('about', {
- url: '/about',
- templateUrl: 'about.html',
- })
- .state('blog', {
- url: '/blog',
- templateUrl: 'blog.html',
- });
- });
- app.controller('mainCtrl', function($scope, $location){
- $scope.active = function(path){
- return ($location.path() === path) ? 'active' : '';
- }
- });
Add Path Templates
Add the ff templates for our path. home.html about.html blog.html That ends this tutorial. Happy Coding :)Add new comment
- 76 views