[AngularJS] New in Angular 1.5 ng-animate-swap

 

<!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%;
}

 

posted @ 2015-11-27 01:48  Zhentiw  阅读(478)  评论(0)  编辑  收藏  举报