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里面的代码)

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

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

如何在 jQuery 中使用 transitionend?

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

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