transitionend的运用案例
Posted 不动如山岳 难如知阴阳
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了transitionend的运用案例相关的知识，希望对你有一定的参考价值。
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>
以上是关于transitionend的运用案例的主要内容，如果未能解决你的问题，请参考以下文章
transitionend事件 监听 fadeIn fadeOut 两个方法无效（动画结束时无法执行transitionend里面的代码）