<!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. Webview Android与js交互

    Android 中可以通过webview来实现和js的交互,在程序中调用js代码,只需要将webview控件的支持js的属性设置为true Android(Java)与JavaScript(HTML) ...

  2. Linux下解决高并发socket最大连接数所受的各种限制（解除IO限制）

    linux作为服务器系统,当运行高并发TCP程序时,通常会出现连接建立到一定个数后不能再建立连接的情况 本人在工作时,测试高并发tcp程序(GPS服务器端程序),多次测试,发现每次连接建立到3800左 ...

  3. class-loader.

    the jdk hierarchical relationship of class-loader ----Module Class Loading and Bootstrapping---- boo ...

  4. ASP.NET菜鸟之路之登录系统

    背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. 网站介绍 根据书上的例子做了一个比较粗糙的登录例 ...

  5. SAS学习笔记

    一.            在SAS中进行随机抽样: 1. 在实际数据处理中常常需要进行样本抽样,在实践中主要有两种情况: (1)简单无重复抽样(2)分层抽样   a.等比例分层抽样  b. 不等比例 ...

  6. underscorejs-max学习

    2.15 max 2.15.1 语法: _.max(list, [iteratee], [context]) 2.15.2 说明: 返回list中的最小值. list为集合,数组.对象.字符串或arg ...

  7. JSON基础知识总结

    JSON基础 一.JSON简介 JSON,全称“JavaScript Object Notation(JavaScript对象表示法)”,起源于JavaScript的对象和数组.JSON,说白了就是J ...

  8. 嵌入式学习笔记（虚拟机共享文件夹配置-Ubuntu系统中）

    最近在学习Linux的操作系统,使用的是虚拟机.由于一些文件需要在主机和虚拟机中都要编辑,如果可以使得文件共享,可以极大的提高工作效率! 配置共享文件的步骤如下: [第一步] 在虚拟机软件中设置 [第 ...

  9. Linux——搭建PHP开发环境第一步：apache

    原文链接:http://www.2cto.com/os/201511/450258.html ##### Apache 编译安装[root@localhost ~]# yum install gcc ...

  10. 原生网络请求：同步请求、异步请求、GET请求、POST请求

    1.同步请求可以从因特网请求数据,一旦发送同步请求,程序将停止用户交互,直至服务器返回数据完成,才可以进行下一步操作, 2.异步请求不会阻塞主线程,而会建立一个新的线程来操作,用户发出异步请求后,依然 ...