Angular Study Notes--ng-animate

<! DOCTYPE html>varM1 = Angular.module (' myApp ', [' nganimate ']); M1.controller (' Aaa ', [' $scope ',function($scope) {$scope. bbtn=true; }]);</script><style type= "Text/css" >. box{background:pink; width:100px;height:100px; transition:1s all;} . box.ng-enter{opacity:0;} . box.ng-enter-active{opacity:1}. box.ng-leave{opacity:1;} . box.ng-leave-active{opacity:0;}</style>if= "bbtn" class= "box" ></div></body>
<! DOCTYPE html>varM1 = Angular.module (' myApp ', [' Ngroute ', ' nganimate ']); M1.config ([' $routeProvider ',function($routeProvider) {$routeProvider. When ('/aaa ', {Template:' <p>aaaaaaaaaaaa</p> '}). When ('/BBB ', {Template:' <p>bbbbbbbbbbb</p> '}). When ('/CCC ', {Template:' <p>cccccccccccccc</p> '})}]) M1.controller (' Aaa ', [' $scope ',function($scope) {}])</script><style type= "Text/css" >. box{position:absolute; transition:1s all;} . box.ng-enter{opacity:0;} . box.ng-enter-active{opacity:1}. box.ng-leave{opacity:1;} . box.ng-leave-active{opacity:0;}</style>
<! DOCTYPE html>. box{transition:1s All;} . box.ng-enter{opacity:0;} . box.ng-enter-active{opacity:1;} . box.ng-leave{Display:none;} . box.ng-enter-stagger{animate-delay:100ms;}</style><script>varM1 = Angular.module (' myApp ', [' nganimate ']); M1.controller (' Aaa ', [' $scope ', ' $http ', ' $timeout ',function($scope, $http, $timeout) {varTimer =NULL; $scope. Data= []; $scope. Change=function(name) {$timeout. Cancel (timer); Timer= $timeout (function() {$http ({method:' JSONP ', URL:' https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd= ' +name+ ' &cb=json_callback '}). Success (function(data) {//console.log (data);$scope. Data =Data.s;                }); },500);                    }; }]);</script>
Angular Study Notes--ng-animate