<!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:;

  margin:;

}

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:;

  left:;

  right:;

  height:100%;

  transition:1s ease-out all;

}

.animate-banner.ng-enter {

  opacity: 0.3;

  left:-100%;

}

.animate-banner.ng-enter-active {

  opacity:;

  left:;

}

.animate-banner.ng-leave {

  opacity:;

  left:0%;

}

.animate-banner.ng-leave-active {

  opacity:0.3;

  left:100%;

}

[AngularJS] New in Angular 1.5 ng-animate-swap的更多相关文章

  1. [Angular] Use Angular components in AngularJS applications with Angular Elements

    When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...

  2. 【js类库AngularJs】解决angular+springmvc的post提交问题

    [js类库AngularJs]解决angular+springmvc的post提交问题 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前 ...

  3. [AngularJS] New in Angular 1.3 - Performance Boost with debugInfoEnabled

    By default, Angular provides a lot of debug information on the DOM that's only necessary for tools l ...

  4. ng animate

    要在angular中加入动画必须引入angular.animate.js插件,然后就可以在module中引入ngAnimate模块.如: var module1 = angular.module('m ...

  5. [AngularJS] Lazy loading Angular modules with ocLazyLoad

    With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...

  6. AngularJS进阶(五)Angular实现下拉菜单多选

    Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http:// ...

  7. AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

    ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...

  8. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  9. [AngularJS] Using the Angular scope $destroy event and method

    With Angular scopes, you have access to a $destroy event that can be used to watch $scope events. Th ...

随机推荐

  1. [转帖]AVS音视频编解码技术了解

    AVS高清立体视频编码器 电视技术在经历了从黑白到彩色.从模拟到数字的技术变革之后正在酝酿另一场技术革命,从单纯观看二维场景的平面电视跨越到展现三维场景的立体电视3DTV.3DTV系统的核心问题之一是 ...

  2. SVN global ignore pattern for c#

    *.resharperoptions Web_Data log */[Bb]in [Bb]in */obj obj  */TestResults TestResults *.svclog Debug ...

  3. Android客户端采用Http 协议Post方式请求与服务端进行数据交互（转）

    http://blog.csdn.net/javanian/article/details/8194265

  4. SVN的使用（转发）

    http://my.oschina.net/joanfen/blog/194491?fromerr=LM5QY3YF

  5. [转]Delphi 中 image 控件加载bmp、JPG、GIF、PNG等图片的办法

    procedure TForm1.Button1Click(Sender: TObject); var jpg: TJPEGImage; // 要use Jpeg单元 begin // 显示jpg大图 ...

  6. Wireshark抓包、过滤器

    查阅于http://blog.sina.com.cn/s/blog_5d527ff00100dwph.html 1.捕捉过滤器 设置捕捉过滤器的步骤是:- 选择 capture -> optio ...

  7. 理解线程的挂起，sleep还有阻塞

    线程是靠cpu来运行的,cpu要运行一个线程(不说别的)最起码就是要占用cpu时间,象Windows这样的多任务操作系统,可以允许多个线程同时运行,所谓的同时运行并不是真正的同时运行,而是轮流运行不同 ...

  8. 10分钟 教你学会Linux/Unix下的vi文本编辑器

    10分钟 教你学会Linux/Unix下的vi文本编辑器 vi编辑器是Unix/Linux系统管理员必须学会使用的编辑器.看了不少关于vi的资料,终于得到这个总结.不敢独享,和你们共享. 首先,记住v ...

  9. angularjs学习笔记三——directive

    AngularJS 通过被称为 指令 的新属性来扩展 HTML. 正如你所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性. HTML5 允许扩展的(自制的)属性,以 data- ...

  10. thinkphp框架之模型（数据库查询）

    1. 模型定义 文件名称必须是 表名+Model.class.php 例如:UserModel.class.php namespace Home\Model; //该模型类的命名空间 use Thin ...