transitionend的運用案例

時間 2019-12-10
標籤 transitionend 運用案例简体版
原文原文鏈接
transitionend事件表明着過渡動畫結束後javascript
原生的綁定方法css
obj.addEventListener('transitionEnd', function(){html
//do somingjava
})web
咱們能拿這個過渡結束事件作些什麼事呢？chrome
好比咱們在用CSS3寫的一個過渡動畫，當過渡結束後，進行回調，瀏覽器
下面給出一個小案例app
當咱們用CSS3過渡去寫一個無縫的輪播，過渡結束時候判斷圖片是否到達了最後一張，而後進行去掉過渡屬性，並回到第一張圖片的位置。ide
主意:該案例是移動端的案例，處理了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>
相關標籤/搜索