Skip to content

Instantly share code, notes, and snippets.

@bezzad

bezzad/animation-using-angularjs-ui-router-and-nganimate.markdown

Last active November 10, 2018 08:16
Show Gist options
  • Save bezzad/c26671a034b850a985253c9b2813dbb9 to your computer and use it in GitHub Desktop.
Save bezzad/c26671a034b850a985253c9b2813dbb9 to your computer and use it in GitHub Desktop.
Download ZIP
Animation using AngularJS ui-router and ngAnimate
Raw
animation-using-angularjs-ui-router-and-nganimate.markdown

Animation using AngularJS ui-router and ngAnimate

Feel free to use this code if you are using AngularJS Framework in your application. This will help you easily create beautiful animated wizards or cover other UI scenarios that require a step-by-step interactions. Better used for single-page apps.

A Pen by Behzad Khosravifar on CodePen.

License.

Raw
index.html
<html ng-app="angularStates">
<head>
<title>AngularJS - UI Router/ngAnimate Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="MainController" ng-class="{'view-back': state.back, 'view-to-home': state.toHome}">
<!-- Content -->
<div class="image-content">
<div class="top-gradient"></div>
<div class="wrapper">
<div class="header" ng-class="{ 'slide-top': !homePageIsShown}">
Angular JS
<div class="smaller">
ui-router + ngAnimate
</div>
</div>
<div class="start-btn-wrapper" ng-class="{ 'slide-bottom': !homePageIsShown}">
<a href="#" ui-sref="node">CLICK HERE</a>
</div>
</div>
</div>
<div class="client-input-wrapper" ui-view>
</div>
<!-- END Content -->
<script data-require="angular.js@1.2.10" data-semver="1.2.10" src="https://code.angularjs.org/1.2.10/angular.min.js"></script>
<script data-require="angular-animate@1.2.11" data-semver="1.2.11" src="https://code.angularjs.org/1.2.11/angular-animate.min.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
angular
.module('angularStates', ['ui.router', 'ngAnimate'])
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
template: '',
controller: function ($rootScope) {
$rootScope.homePageIsShown = true;
}
})
.state('node', {
url: "/node",
template: '<div class="inner-wrapper"><div class="slide-header">Slide 1</div><div class="button-wrapper"><a href="#" ui-sref="home">Back</a><a href="#" ui-sref="node2">Next</a></div></div>',
controller: function ($rootScope) {
$rootScope.homePageIsShown = false;
}
})
.state('node2', {
url: "/node2",
data: {
prev: 'node'
},
template: '<div class="inner-wrapper"><div class="slide-header">Slide 2</div><div class="button-wrapper"><a href="#" ui-sref="node">Back</a><a href="#" ui-sref="home">Home</a></div></div>',
controller: function ($rootScope) {
$rootScope.homePageIsShown = false;
}
})
})
.controller('MainController', function ($rootScope, $scope) {
$rootScope.homePageIsShown = true;
$scope.state = {};
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState) {
var prev = fromState.data ? fromState.data.prev : '';
$scope.state.back = (toState.name === prev);
$scope.state.toHome = (toState.name === 'home');
});
})
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
Raw
style.css
body {
background-color: #EEEEEE;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow: hidden;
}
.header {
font-size: 43px;
color: #000000;
line-height: 52px;
text-align: center;
margin: 50px 0;
position: relative;
z-index: 1;
font-weight: 300;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.header .smaller {
font-size: 23px;
line-height: 1;
}
a {
color: #28AEFD;
text-decoration: none;
}
.start-btn-wrapper {
text-align: center;
font-size: 20px;
font-weight: 300;
position: relative;
z-index: 1;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.start-btn-wrapper a {
display: inline-block;
border: 1px solid #28AEFD;
padding: 5px 15px;
}
.slide-header {
font-weight: 100;
font-size: 33px;
color: #222222;
margin-bottom: 15px;
margin-top: 25px;
}
.button-wrapper a {
display: inline-block;
border: 1px solid #28AEFD;
padding: 5px 15px;
margin: 15px;
font-weight: 300;
}
.slide-top {
-moz-transform: translate(0%, -150%);
-ms-transform: translate(0%, -150%);
-webkit-transform: translate(0%, -150%);
transform: translate(0%, -150%);
opacity: 0;
}
.slide-bottom {
-moz-transform: translate(0%, 150%);
-ms-transform: translate(0%, 150%);
-webkit-transform: translate(0%, 150%);
transform: translate(0%, 150%);
opacity: 0;
}
[ui-view] {
position: absolute;
width: 500px;
margin: 0 auto;
top: 40px;
left: 0;
right: 0;
height: 160px;
-moz-transition: all 0.45s cubic-bezier(0.35, 0.33, 0.25, 1.045);
-o-transition: all 0.45s cubic-bezier(0.35, 0.33, 0.25, 1.045);
-webkit-transition: all 0.45s cubic-bezier(0.35, 0.33, 0.25, 1.045);
transition: all 0.45s cubic-bezier(0.35, 0.33, 0.25, 1.045);
opacity: 1;
}
[ui-view] .inner-wrapper {
height: 100%;
padding: 20px;
background-color: #FFF;
text-align: center;
border-radius: 5px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
}
[ui-view].ng-enter {
-moz-transform: translate(150%, 0%);
-ms-transform: translate(150%, 0%);
-webkit-transform: translate(150%, 0%);
transform: translate(150%, 0%);
opacity: 0;
}
.view-back [ui-view].ng-enter {
-moz-transform: translate(-150%, 0%);
-ms-transform: translate(-150%, 0%);
-webkit-transform: translate(-150%, 0%);
transform: translate(-150%, 0%);
}
[ui-view].ng-enter-active {
opacity: 1;
-moz-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
.view-back [ui-view].ng-enter-active {
-moz-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
[ui-view].ng-leave {
-moz-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
.view-back [ui-view].ng-leave {
-moz-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
}
.view-to-home [ui-view].ng-leave {
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
[ui-view].ng-leave-active {
-moz-transform: translate(-150%, 0%);
-ms-transform: translate(-150%, 0%);
-webkit-transform: translate(-150%, 0%);
transform: translate(-150%, 0%);
opacity: 0;
}
.view-back [ui-view].ng-leave-active {
-moz-transform: translate(150%, 0%);
-ms-transform: translate(150%, 0%);
-webkit-transform: translate(150%, 0%);
transform: translate(150%, 0%);
}
.view-to-home [ui-view].ng-leave-active {
-moz-transform: scale(2, 2);
-ms-transform: scale(2, 2);
-webkit-transform: scale(2, 2);
transform: scale(2, 2);
}
Raw
style.scss
@import "compass/css3";
body {
background-color: #EEEEEE;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow: hidden;
}
.header {
font-size: 43px;
color: #000000;
line-height: 52px;
text-align: center;
margin: 50px 0;
position: relative;
z-index: 1;
font-weight: 300;
@include transition(all 0.3s ease);
.smaller {
font-size: 23px;
line-height: 1;
}
}
a {
color: #28AEFD;
text-decoration: none;
}
.start-btn-wrapper {
text-align: center;
font-size: 20px;
font-weight: 300;
position: relative;
z-index: 1;
@include transition(all 0.3s ease);
a {
display: inline-block;
border: 1px solid #28AEFD;
padding: 5px 15px;
}
}
.slide-header {
font-weight: 100;
font-size: 33px;
color: #222222;
margin-bottom: 15px;
margin-top: 25px;
}
.button-wrapper a {
display: inline-block;
border: 1px solid #28AEFD;
padding: 5px 15px;
margin: 15px;
font-weight: 300;
}
// styles for animation (ngAnimate)
.slide-top {
@include transform(translate(0%, -150%));
opacity: 0;
}
.slide-bottom {
@include transform(translate(0%, 150%));
opacity: 0;
}
[ui-view] {
.inner-wrapper {
height: 100%;
padding: 20px;
background-color: #FFF;
text-align: center;
border-radius: 5px;
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.14);
}
position: absolute;
width: 500px;
margin: 0 auto;
top: 40px;
left: 0;
right: 0;
height: 160px;
@include transition(all 0.45s cubic-bezier(0.350, 0.330, 0.250, 1.045));
opacity: 1;
&.ng-enter {
@include transform(translate(150%, 0%));
opacity: 0;
.view-back & {
@include transform(translate(-150%, 0%));
}
}
&.ng-enter-active {
opacity: 1;
@include transform(translate(0%, 0%));
.view-back & {
@include transform(translate(0%, 0%));
}
}
&.ng-leave {
@include transform(translate(0%, 0%));
opacity: 1;
.view-back & {
@include transform(translate(0%, 0%));
}
.view-to-home & {
@include transform(scale(1, 1));
}
}
&.ng-leave-active {
@include transform(translate(-150%, 0%));
opacity: 0;
.view-back & {
@include transform(translate(150%, 0%));
}
.view-to-home & {
@include transform(scale(2, 2));
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment