您的位置：首页 > Web前端 > AngularJS

[AngularJS] New in Angular 1.5 ng-animate-swap

2015-11-27 01:48 591 查看

<!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:0;
margin:0;
}

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:0;
left:0;
right:0;
height:100%;
transition:1s ease-out all;
}

.animate-banner.ng-enter {
opacity: 0.3;
left:-100%;
}
.animate-banner.ng-enter-active {
opacity: 1;
left:0;
}
.animate-banner.ng-leave {
opacity:1;
left:0%;
}
.animate-banner.ng-leave-active {
opacity:0.3;
left:100%;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航