[AngularJS] New in Angular 1.5 ng-animate-swap
<!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的更多相关文章
- [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 ...
- 【js类库AngularJs】解决angular+springmvc的post提交问题
[js类库AngularJs]解决angular+springmvc的post提交问题 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前 ...
- [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 ...
- ng animate
要在angular中加入动画必须引入angular.animate.js插件,然后就可以在module中引入ngAnimate模块.如: var module1 = angular.module('m ...
- [AngularJS] Lazy loading Angular modules with ocLazyLoad
With the ocLazyLoad you can load AngularJS modules on demand. This is very handy for runtime loading ...
- AngularJS进阶(五)Angular实现下拉菜单多选
Angular实现下拉菜单多选 写这篇文章时,引用文章地址如下: http://ngmodules.org/modules/angularjs-dropdown-multiselect http:// ...
- AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选
ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- [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 ...
随机推荐
- 7——使用TextView实现跑马灯
首先给TextView添加一个单行限制: android:singleLine="true" - 解决方案一 更改TextView的一个属性: android:ellipsize= ...
- SQL 中的好习惯和坏习惯
在程序员日常的工作中,SQL可以说不可避免的,高效的SQL可以带来更加愉悦的体验.好的SQL书写习惯会给我们的工作带来极大的好处.简单总结下SQL的好习惯和坏习惯. IN和NOT IN 操作符 编码中 ...
- 【转】 iOS开发 剖析网易新闻标签栏视图切换(addChildViewController属性介绍)
原文:http://blog.csdn.net/hmt20130412/article/details/34523235 本来只是打算介绍一下addChildViewController这个方法的,正 ...
- 转：常用的HTML标签和属性解释
基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等 <TITLE>---</TITLE>,包含 ...
- AutoLayout学习之理解intrinsicContentSize，Content Hugging Priority，Content Compression Resistance Priority
TableViewCell的高度计算应该是所有开发者都会使用到的东西,之前都是用代码计算的方法来计算这个高度.最近有时间看了几个计算Cell高度的方法.基本上都用到了AutoLayout,这篇首先介绍 ...
- openssl提取pfx证书密钥对
刚做银联的项目,对方给了1.pfx和1.cer两个测试文件,总结一下利用这两个文件提取出文本 银联提供两个测试证书 1.pfx 和 1.cer . 其中 pfx证书包含RSA的公钥和密钥;cer证书 ...
- cocos2dx lua调用C++类.
最近需求所迫, 终于着手传说中的 lua 了. 折腾了4天, 总算大概搞明白了用法. 细节咱们就别谈了, 直接说项目里怎么跑起来. 准备工作 我们需要一系列繁琐的前奏. tolua++: 这是必备工具 ...
- asp.net使用Mysql乱码处理
在asp.net与mysql数据库打交道的时候,由于配置的问题,会遇到自己写的方法在读取数据库中数据的时候,英文,数字可以正常通过,但是中文就无法通过,以登录为例(方法略),当输入英文用户名的时候可以 ...
- 用批处理来重启IIS的应用程序池
批处理很简单,先Stop再Start就行,代码如下(apppoolName是应用程序池的实例名):c:\windows\system32\inetsrv\AppCmd.exe stop apppool ...
- JQUERY1.9学习笔记 之内容过滤器(四) parent选择器
描述:选择至少包含一个子节点的元素(一个标签或是文本). 例:找出所有有子元素的td标签,包含文本. <!doctype html><html lang="en" ...