<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-animate.min.js"></script> <script> var m1 = angular.module('myApp',['ngAnimate']); m1.controller('Aaa',['$scope',function($scope){ $scope.bBtn = true; }]); </script> <style type="text/css"> .box{ background: pink; 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> </head> <body> <div ng-controller="Aaa"> <input type="checkbox" ng-model="bBtn"> <div ng-if="bBtn" class="box"> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-animate.min.js"></script> <script> var m1 = 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> </head> <body> <div ng-controller="Aaa"> <a href="#aaa">index</a> <a href="#bbb">222222</a> <a href="#ccc">33333</a> <div ng-view class="box"></div> </div> </body> </html>
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="angular.min.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-animate.min.js"></script> <style type="text/css"> .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> var m1 = angular.module('myApp',['ngAnimate']); m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){ var timer = 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> </head> <body> <div ng-controller="Aaa"> <input type="text" ng-model="name" ng-keyup="change(name)"> <input type="button" ng-click="change(name)" value="搜索"> <ul> <li ng-repeat="d in data" class="box">{{d}}</li> </ul> </div> </body> </html>