transitionend事件代表着過渡動畫結束后
原生的綁定方法
obj.addEventListener('transitionEnd', function(){
//do soming
})
我們能拿這個過渡結束事件做些什么事呢？
比如我們在用CSS3寫的一個過渡動畫，當過渡結束后，進行回調，
下面給出一個小案例
當我們用CSS3過渡去寫一個無縫的輪播，過渡結束時候判斷圖片是否到達了最后一張，然后進行去掉過渡屬性，並回到第一張圖片的位置。
主意:該案例是移動端的案例，處理了webkit內核瀏覽器的性能加速，建議用chrome測試
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>transitonend實現的輪播案例</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#wrap {
width: 26.66666667rem;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 8.544166667rem;
}
.banner {
position: absolute;
left: 0px;
}
.banner li {
width: 26.66666667rem;
float: left;
height: 8.544166667rem;
}
img {
width: 100%;
}
.change {
position: absolute;
bottom: 1rem;
text-align: center;
width: 100%;
opacity: 0.8;
}
.change li {
display: inline-block;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: #666;
margin: 0 0.2rem;
}
.change .on {
background: red;
}
</style>
<body>
<div id="wrap"></div>
</body>
<script type="text/javascript">
//控制跟元素的rem
function initSize() {
var win_w = document.body.offsetWidth;
var min_w;
var fontSize;
if(win_w > 640) {
fontSize = 24;
} else {
min_w = Math.max(320, win_w);
fontSize = min_w / 320 * 12
}
document.getElementsByTagName('html')[0].style.fontSize = fontSize + 'px';
}
onresize = initSize;
initSize();
function Slider(opts) {
this.wrap = opts.obj;
this.list = opts.list;
this.nav = opts.nav;
this.time = opts.time;
//構造三部曲
this.init()
this.renderDom();
this.bindDom();
}
//初始化
Slider.prototype.init = function() {
this.index = 0;
this.scale = this.wrap.offsetWidth;
}
//動畫函數原型鏈
Slider.prototype.go = function(n) {
var that = this;
var Oul = that.Oul;
var index = that.index;
var scale = that.scale;
var lis = Oul.getElementsByTagName('li');
var len = that.list.length;
var i;
Oul.style.webkitTransition = 'all 0.2s ease-out';
i = index + n * 1;
Oul.addEventListener('webkitTransitionEnd', function() {
if(i >= len - 2) {
Oul.style.webkitTransition = 'none';
Oul.style.left = -that.scale + 'px';
i = 0;
//小圓點部分判斷
if(that.nav) {
that.Ouli.firstChild.className = 'on';
}
} else if(i < 0) {
i = len - 3;
Oul.style.webkitTransition = 'none';
Oul.style.left = -(len - 2) * that.scale + 'px';
//小圓點部分判斷
if(that.nav) {
that.Ouli.lastChild.className = 'on';
}
}
//保留當前圖片索引值
that.index = i;
})
Oul.style.left = -(i + 1) * that.scale + 'px';
//開啟小圓點
if(that.nav) {
var Ouli = that.Ouli.getElementsByTagName('li');
for(var a = 0; a < len - 2; a++) {
if(Ouli[a].className == 'on') {
Ouli[a].className = '';
}
}
Ouli[i] && (Ouli[i].className = 'on');
}
}
//渲染頁面的原型鏈
Slider.prototype.renderDom = function() {
var wrap = this.wrap;
var data = this.list;
var len = data.length;
var scale = this.scale
//創建函數
this.Oul = document.createElement('ul');
//遍歷圖片數據
for(var i = 0; i < len; i++) {
var li = document.createElement('li');
var item = data[i];
if(item) {
li.innerHTML = '<img src="' + item['src'] + '"/>'
}
this.Oul.appendChild(li);
}
this.Oul.className = 'banner';
this.Oul.style.left = -scale + 'px';
this.Oul.style.width = +len * scale + 'px'
wrap.appendChild(this.Oul);
//開啟小圓點
if(this.nav) {
this.Ouli = document.createElement('ul');
for(var i = 0; i < len - 2; i++) {
var li = document.createElement('li');
this.Ouli.appendChild(li);
}
this.Ouli.className = 'change';
wrap.appendChild(this.Ouli);
this.Ouli.firstChild.className = 'on';
}
}
//綁定事件函數原型鏈
Slider.prototype.bindDom = function() {
var that = this;
var len = that.list.length - 2;
var Oul = that.Oul;
var scale = that.scale;
var offsetLeft;
var time = that.time;
//綁定定時器
function next() {
that.go('1')
}
var timer = setInterval(next, time)
//觸摸開始
var startHandler = function(event) {
//記錄剛開始接觸屏幕的時間
that.startTime = new Date() * 1;
//記錄剛開始接觸屏幕的位置
that.startX = event.touches[0].pageX;
//清楚偏移量
that.offsetX = 0;
offsetLeft = Oul.offsetLeft;
//清楚定時器
clearInterval(timer);
}
//觸摸滑動過程
var moveHandler = function(event) {
//阻止瀏覽器默認觸摸事件
event.preventDefault();
//計算偏移量
that.offsetX = event.touches[0].pageX - that.startX;
//圖片隨手指移動
Oul.style.webkitTransition = 'none';
Oul.style.left = +offsetLeft + that.offsetX + 'px';
}
//觸摸結束
var endHandler = function(event) {
//記錄手指離開屏幕時的位置
var endTime = new Date() * 1;
//獲取滑動邊界值
var boundary = scale / 3
//判斷快滑動還是慢滑動
if(endTime - that.startTime > 300) {
if(that.offsetX > boundary) {
//下一頁
that.go('-1');
} else if(that.offsetX < -boundary) {
//上一頁
that.go('1');
} else {
//留在本頁
that.go('0');
}
} else {
if(that.offsetX > 50) {
that.go('-1');
} else if(that.offsetX < -50) {
that.go('1');
} else {
that.go('0');
}
}
timer = setInterval(next, time);
}
//事件綁定
Oul.addEventListener('touchstart', startHandler);
Oul.addEventListener('touchmove', moveHandler);
Oul.addEventListener('touchend', endHandler);
}
var list = [{
src: 'img/5.jpg'
}, {
src: 'img/1.jpg'
}, {
src: 'img/2.jpg'
}, {
src: 'img/3.jpg'
}, {
src: 'img/4.jpg'
}, {
src: 'img/5.jpg'
}, {
src: 'img/1.jpg'
}];
new Slider({
//傳入對象
'obj': document.getElementById('wrap'),
//傳入數據
'list': list,
//是否開啟小圓點，默認是false
'nav': true,
//自動播放時間
'time': 3500
})
</script>
</html>