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>