以下代码取自 angular 1.1.4 的工作示例，仅将新的 GreenSock api 用于 ng-animate。切换功能可以正常工作，因为 ng-show 的行为符合预期，但是在 ng-show 上没有调用 AppAnimation 函数“list-in”和“list-out”。
<!DOCTYPE html>
<head>
<style>
.box { color: white; text-align: center; height: 100px; font-size: 86px; }
.on { background-color: green; }
.off { background-color: red; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.7/TweenMax.min.js"></script>
<script>
angular.module('AppAnimations', [])
.animation('list-out', ['$window',function($window) {
return {
start : function(element, done) {
console.log('list-out')
TweenMax.set(element, {position:'relative'});
var duration = 1;
//we can use onComplete:done with TweenMax, but lets use
//a delay value for testing purposes
TweenMax.to(element, 1, {opacity:0, width:0});
$window.setTimeout(done, duration * 1000);
}
}
}])
.animation('list-in', ['$window',function($window) {
return {
setup: function(element) {
TweenMax.set(element, {opacity:0, width:0});
},
start : function(element, done) {
console.log('list-in')
var duration = 1;
//we can use onComplete:done with TweenMax, but lets use
//a delay value for testing purposes
TweenMax.to(element, duration, {opacity:1, width:210});
$window.setTimeout(done, duration * 1000);
}
}
}])
angular.module('myApp', ['AppAnimations'])
.controller('MainController', ['$scope', function($scope) {
$scope.toggle = true;
}])
</script>
</head>
<body ng-app="myApp" ng-controller="MainController">
<button ng-click="toggle = !toggle">Toggle!</button>
<div class="box on" ng-show="toggle" ng-animate="{leave:'list-out', enter:'list-in'}">On</div>
<div class="box off" ng-hide="toggle" ng-animate="{leave:'list-out', enter:'list-in'}">Off</div>
</body>
</html>