transitionend的运用案例

Posted 2020-08-23 野生小前端

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 src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        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里面的代码）

移动端 transitionEnd函数用来检测过渡是否完成

一个总是触发的“transitionend”事件，并且只触发一次

如何在 jQuery 中使用 transitionend？

Fllink实时计算运用Flink 大数据实战案例二

如何运用领域驱动设计 - 值对象