<!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. type和create type

    type和create type 异同点:      create type 可在库中生成一个长期有效的自定义类型对象,而type作用域仅限于语句块中:      两者都可以自定义数据类型: 各种ty ...

  2. [转]Delphi : keydown与keypress的区别,组合键

    Shift 是一个集合变量. type TShiftState = set of (ssShift, ssAlt, ssCtrl, ssLeft, ssRight, ssMiddle, ssDoubl ...

  3. jQuery 的ready事件和 JavaScript 的load事件对比

    为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, ...

  4. yii2源码学习笔记(二）

    yii\base\Object代码详解 <?php /** * @link http://www.yiiframework.com/ * @copyright Copyright (c) 200 ...

  5. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  6. Html表格自动换行

    前述: 前端经常用到表格,而表格中的列里面的内容一多,会撑大列的宽度,这个时候如果想要内容不撑大列宽...请看下面的link: link:html表格自动换行

  7. Scut：运行测试服务器

    在大致过了一遍Scut的底层结构(其实只是对各个组件有了一个初步印象而已),现在开始尝试搭建“口袋天界”的Scut服务端. 1. 设置外部启动项 项目属性 -- 调试 -- 启动外部程序 -- 项目根 ...

  8. 转：嵌入式linux启动时运行的inittab文件

    嵌入式系统下的linux启动配置文件,不同与普通的PC linux启动配置,启动相关文件与文件的内容也要少得多.嵌入式系统下的linux启动过程一般是:     1 在bootloader中制定各种要 ...

  9. Json 处理datetime

    json怎么处理datetime类型 http://hi.baidu.com/culion/item/428df54bf36762aede2a9ff1

  10. Asteroids

    http://poj.org/problem?id=3041 #include<cstdio> #include<cstring> #include<algorithm& ...