<!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. 阿里云OSS存储开发（一）

    Step 1. 初始化一个OSSClient OSSClient是与OSS服务交互的客户端,SDK的OSS操作都是通过OSSClient完成的. 下面代码新建了一个OSSClient: using A ...

  2. mssql的holdlock锁跟索引的关系

    表锁tablock是会给表所有数据附加共享锁,但是只是当前语句有效,语句执行完毕,锁释放,而不会持续到事务结束,而tablockX表锁是持续到事务结束的锁 holdlock锁,锁定的范围会根据wher ...

  3. Hibernate 事件监听

    事件监听是JDK中常见的一种模式. Hibernate中的事件监听机制可以对Session对象的动作进行监听,一旦发生了特殊的事件,Hibernate就会调用监听器类中的事件处理方法.在某些功能的设计 ...

  4. 如何使用LoadRunner监控Windows

    1.监视连接前的准备工作   1)进入被监视windows系统,开启以下二个服务Remote Procedure Call(RPC) 和Remote Registry Service (开始—)运行 ...

  5. sublime text3 下搭建python IDE环境 --Anaconda插件篇

    近来在园区发现大家使用ST3(Sublime text 3)工具进行python学习.然后自己也跟风了一把. 1.ST3下载地址: http://www.sublimetext.com/3 2.安装S ...

  6. 使用django-mssql时候报pythoncom模块不存在

    pip install django-mssql是链接sqlserver的数据库db引擎,这里用到了pythoncom模块,所以还需要安装 pip install pypiwin32 settings ...

  7. Django - staticfiles，STATIC_ROOT， STATIC_URL，STATICFILES_DIRS

    staticfiles:这是一个静态资源管理的app,django.contrib.staticfiles.老的版本中,静态资源管理一直是一个问题,部分app发布的时候需要带上静态资源,在部署的时候必 ...

  8. C语言到底怎么分配空间

    程序分为:代码区.数据区.bss区.堆区.栈区.平时常用区分的是代码区.堆区.栈区.下面加上例子区分一下. 3 代码区顾名思义就是存放代码的,里面的内容是不可以修改的.例如你定义了一个变量char * ...

  9. Activity完整的生命周期

    首语:群里看到一位网友说:你能说出Activity的完整生命周期吗?看到这句话,我也在反思自己,我也是个fresh,所以想找个时间仔细的扒一扒Activity生命周期. 首先拿一张简单而又复杂的生命周 ...

  10. Install RHadoop with Hadoop 2.2 – Red Hat Linux

    Prerequisite Hadoop 2.2 has been installed (and the below installation steps should be applied on ea ...