<!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. 程序里面的system.out.println（）输出到其他位置，不输出到tomcat控制台。

    设置startup.bat: call "%EXECUTABLE%" run %CMD_LINE_ARGS% >> ..\logs\kongzitai.txt 将sys ...

  2. 【转】 NSString / NSMutableString 字符串处理，常用代码 (实例)

    Objective-C 中核心处理字符串的类是 NSString 与 NSMutableString ,这两个类最大的区别就是NSString 创建赋值以后该字符串的内容与长度不能在动态的更改,除非重 ...

  3. Linux系统配置成简单的路由器

    一.两个不同网段的子网相互访问或通信 废话不多说了,直接上图,一目了然吧. 按照如图配置,就可以实现两个不同网段的子网相互通信. 二.连接上网的配置: 如果想让这两个子网,不仅可以相互通信,而且还可以 ...

  4. [javascript]event属性

    1.clientX和clientY clientX和clientY是事件发生时,鼠标离浏览器可视文档区域左上角的位置 2.offsetX和offsetY offsetX和offsetY是事件发生时,鼠 ...

  5. python logging模块使用

    近来再弄一个小项目,已经到收尾阶段了.希望加入写log机制来增加程序出错后的判断分析.尝试使用了python logging模块. #-*- coding:utf-8 -*- import loggi ...

  6. Python爬虫预备知识

    1.http编程知识 http中client 和server的工作模式 client和server建立可靠的tcp链接(在HTTP1.1中这个链接是长时间的,超时断开策略) client通过socke ...

  7. Linux 下 将使用Python-Django开发的web应用布置到服务器上(亲测有效)

    写在前面: Django是一个卓越的新一代Web框架,相信使用Python的人对此并不陌生,但将我们完成的web应用布置到到服务器上并不是一件容易的事情. Django详细的教程可以参考http:// ...

  8. standing

    2bc*cosA=b^2+c^2-a^2 #include<cstdio> #include<cstring> #include<iostream> #includ ...

  9. RESTful API -备

    网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......). 因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致AP ...

  10. Linux Makefile多目录的编写

    手头一个项目,需要编写项目的makefile 多目录结构: csource/ ├── common│   └── sqlite3├── inc│   ├── curl│   ├── lua│   └─ ...