<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>animate</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
<script src="js/angular-animate.js"></script>
<style>
.fade-in {
-webkit-transition:2s linear all;
transition:2s linear all;
}
.fade-in.ng-enter {
opacity:0;
}
.fade-in.ng-enter.ng-enter-active {
opacity:1;
}
.fade-in.ng-leave {
opacity:1;
}
.fade-in.ng-leave.ng-leave-active {
opacity:0;
}
</style>
</head>
<body >
<header>
<p>Animate</p>
</header>
</body>
<div ng-controller="HomeController">
<ul>
<li class="fade-in" ng-repeat="r in roommates">
{{ r }}
</li></ul>
</div>
<script type="text/javascript">
angular.module('myApp', ['ngAnimate'])
.controller('HomeController',function($scope) {
$scope.roommates = [
'Ari','Q','Sean','Anand'
];
setTimeout(function() {
$scope.roommates.push('Ginger');
$scope.$apply();// 触发一次digest
setTimeout(function() {
$scope.roommates.shift();
$scope.$apply();// 触发digest
},2000);
},1000);
});
</script>
</html>
