• 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>
  • 相关阅读:
    Javascript 之 构造函数
    MySQL无法创建外键、查询外键的属性
    企业该如何进行高效IT运维管理
    提高工作效率:15个有用的项目管理工具
    JavaScript AJAX stream 流式显示
    “后PC”时代来临
    Oracle 11gR2 Database和Active Data Guard迁移案例
    亲历腾讯WEB前端开发三轮面试经历及面试题
    基于jquery的页面代码的优化
    HTML5简略介绍
  • 原文地址:https://www.cnblogs.com/linxianzuo/p/6193559.html
Copyright © 2020-2023  润新知