<!DOCTYPE html> <html ng-app="MyApplication"> <head> <link rel="stylesheet" href="style.css"> <script src="https://code.angularjs.org/1.5.0-beta.2/angular.js"></script> <script src="https://code.angularjs.org/1.5.0-beta.2/angular-animate.js"></script> <script src="script.js"></script> </head> <body ng-controller="ApplicationController as app"> <div class="banner-container"> <img ng-src="{{ app.currentBannerImage }}" class="animate-banner" ng-animate-swap="app.currentBannerImage" /> </div> </body> </html>
angular.module(‘MyApplication‘, [‘ngAnimate‘]) .controller(‘ApplicationController‘, [‘$interval‘, function($interval) { var banners = [ ‘http://ng-slides.appspot.com/ng-animate-swap-demo/Banner1.jpg‘, ‘http://ng-slides.appspot.com/ng-animate-swap-demo/Banner2.jpg‘, ‘http://ng-slides.appspot.com/ng-animate-swap-demo/Banner3.jpg‘ ]; var index = 0, self = this; this.setBanner = function(i) { self.currentBannerImage = banners[index]; }; this.setBanner(0); $interval(function() { index++; index = index % banners.length; self.setBanner(index); }, 3000); }])
html { padding:0; margin:0; } body { padding:20% 0; } .banner-container { height:200px; width:500px; overflow:hidden; margin:0 auto; border:5px solid black; position:relative; } .animate-banner.ng-enter, .animate-banner.ng-leave { position:absolute; top:0; left:0; right:0; height:100%; transition:1s ease-out all; } .animate-banner.ng-enter { opacity: 0.3; left:-100%; } .animate-banner.ng-enter-active { opacity: 1; left:0; } .animate-banner.ng-leave { opacity:1; left:0%; } .animate-banner.ng-leave-active { opacity:0.3; left:100%; }
[AngularJS] New in Angular 1.5 ng-animate-swap
原文：http://www.cnblogs.com/Answer1215/p/4999507.html