Angular.js bidirectional data binding for animated effects

First, the HTML

1, the introduction of the necessary JS files, this is not much to say (note that since you want to use angular to provide animation effects and routing effects, so to introduce Angular-animate.js and angular-route.js two files)

2. Add the following code inside the body:

<div class= "page {Pageclass}}" ng-view></div>

Ng-view says, class dynamically controls the {{Pageclass}} in class through a controller with two-way binding.

Also don't forget to use the module

 
Second, Javascript
 
1. app.js file
 
This is the entry file, the code is as follows:
 
var bookstoreapp = angular.module (' Bookstoreapp ', [     ' ngroute ',  ' nganimate ',  ' bookstorectrls ',  ' Bookstorefilters ',     ' bookstoreservices ',  ' bookstoredirectives ']); Bookstoreapp.config (function ($routeProvider)  {     $routeProvider. When ('/hello ',  {        templateurl:  ' tpls/hello.html ',         controller:  ' Helloctrl '     }). When ('/list ', {         templateUrl:  ' tpls/booklist.html ',         controller:  ' Booklistctrl '     }). otherwise ({         redirectTo:  '/hello '     })}); 
 
First, the BOOKSTOREAPP model model is defined and dependencies are added. The route is then set by Config and the controller corresponding to each route is set.
 
2, Controller.js
 
To set the controller, the code is as follows:
 
var bookstorectrls = angular.module (' Bookstorectrls ', []) Bookstorectrls.controller (' Helloctrl ', [' $scope ', function ($scope)        {$scope. Greeting = {text: ' Hello '};    $scope. pageclass= "Hello";    }]); Bookstorectrls.controller (' Booklistctrl ', [' $scope ', function ($scope) {$scope. pageclass= "List"; }]);
 
The switch of the style is realized by setting the Pageclass variable under different controller.
 
Third, CSS
 
.page {    bottom:0;    padding-top:200px;     position:absolute;    text-align:center;    top:0;     width:100%;}. page h1 {    font-size:60px;}. page a {    margin-top:50px;}. Hello {    background: #00D0BC;     color: #FFFFFF;}. List{    background: #E59400;     color: #FFFFFF;} @-webkit-keyframes rotatefall {    0% {         -webkit-transform: rotatez (0deg);     }    20% {         -webkit-transform: rotatez (10deg);         animation-timing-function: ease-out;    }     40% {        -webkit-transform: rotatez (17deg);     }     60% {        -webkit-transform:  Rotatez (16deg);    }    100% {         -webkit-transform: translatey (100%)  rotatez (17deg);     }}@- webkit-keyframes slideoutleft {    to {         -webkit-transform: translatex ( -100%);    }}@-webkit-keyframes  rotateoutnewspaper {    to {        - Webkit-transform: translatez ( -3000px)  rotatez (360deg);         opacity: 0;    }}@-webkit-keyframes scaleUp {     From {        opacity: 0.3;        -webkit-transform:  Scale (0.8);     }}@-webkit-keyframes slideinright {    from  {        -webkit-transform:translatex (100%);     }    to {        -webkit-transform:  translatex (0);    }}@-webkit-keyframes slideinup {     From {        -webkit-transform:translatey (100%);     }    to {        - Webkit-transform: translatey (0);     }}.ng-enter {    z-index :  8888;}. ng-leave {    z-index: 9999;}. Hello.ng-enter {    -webkit-animation: scaleup 0.5s both ease-in;}. hello.ng-leave {    -webkit-transform-origin: 0% 0%;     -webkit-animation: rotatefall 1s both ease-in;}. list.ng-enter {    -webkit-animation:slideinright 0.5s both ease-in;}. list.ng-leave {    -webkit-animation:slideoutleft 0.5s both ease-in;}
 
Here is the basic CSS3 animation definition, no other compatibility is written, this is only for chrome.
 
Angular.js provides the Ng-enter and Ng-leave methods for animating when an element enters and eliminates, noting that there are no spaces in the middle.
 
This makes it possible to compare the underlying animations with very thin code.
Angular.js bidirectional data binding for animated effects