一个小效果引出的兼容性探讨

最近在做个小效果，没想到引出了几个以前的没认真去自己探讨的兼容问题，最后虽然这个效果还是不是很满意，但在这里想分享一下过程

首先想做的效果是 每次点击页面时，出现一个小波纹，然后自动消失

可以先看一下demo

到最后实现后，发现这个效果实用性不是很高，但是过程引出了一些值得积累的问题

引出知识点：

transition的兼容支持

事件兼容

transitionend的兼容

如果我out了，请点击关闭

首先看一下 transition 的兼容性

IE10+
FF28+
安卓4.4+ （4.4以下加前缀）
ios7.0+（7.0以下加前缀）
opera20+

可以看到，主要兼容是在移动端，所以我通过prefixStyle函数去解决

/**样式兼容**/
    function prefixStyle (style) {
        if ( vendor === '' ) return style;
        style = style.charAt(0).toUpperCase() + style.substr(1);
        //console.log(style)
        return vendor + style;
    };
    var dummyStyle = document.createElement('div').style,
        vendor = (function () {
            var vendors = 't,webkitT,MozT,msT,OT'.split(','),
                t,
                i = 0,
                l = vendors.length;
            for ( ; i < l; i++ ) {
                t = vendors[i] + 'ransform';
                if ( t in dummyStyle ) {
                    //alert(vendors[i])
                    return vendors[i].substr(0, vendors[i].length - 1);
                }
            }
            return false;
        })(),
        cssVendor = vendor ? '-' + vendor.toLowerCase() + '-' : '',//本demo没用到，可以给添加cssText备用
        transition = prefixStyle('transition');//

　　

里面的prefixStyle还是比较简单，只是简单转换，这里的关键是是vendor参数，这里通过创建document.createElement('div').style，然后去匹配浏览器的transform样式属性的存在来辨别浏览器，并定义相应的css前缀

事件兼容

这里的事件兼容主要是考虑pc和移动端的兼容，也就是click等一系列事件

/**事件兼容**/
var hasTouch = 'ontouchstart' in window,
    startEvent = hasTouch ? 'touchstart' : 'mousedown',
    moveEvent = hasTouch ? 'touchmove' : 'mousemove',
    endEvent = hasTouch ? 'touchend' : 'mouseup',
    cancelEvent = hasTouch ? 'touchcancel' : 'mouseup';

这个主要是通过ontouchstart来判别，这个做移动端经常用到的，也没特别之处

 

transitionend的兼容

一开始比较花时间的是这里，首先transitionend之前接触的少，一开始的demo思路是通过mouseup来淡去波纹的，但是发现效果不好，如果鼠标没起，动作就不连贯了

后来发现原来有个transitionend这么好用的属性，但是有遇到奇葩的兼容，就是后面那个end的e字母，有些浏览器（webkit、o、ms）居然是大写......

transitionEndEvent = (function () {
        if ( vendor === false ) return false;
        var transitionEnd = {
                ''          : 'transitionend',
                'webkit'    : 'webkitTransitionEnd',
                'Moz'       : 'transitionend',
                'O'         : 'oTransitionEnd',
                'ms'        : 'MSTransitionEnd'
            };
        return transitionEnd[vendor];
    })();

　　

这里也用到上面那个vendor参数

 

这三个小知识点，基本都是固定死了，值得积累下

 

最后说一下Demo的最后问题：当点击页面的链接时，波纹的效果就没用了，在想，能否把链接的跳转延迟几百毫秒，先让效果执行了呢，目前还没找到好的解决方法，各位有什么建议么（尝试过，获取a的href，然后再等执行完再跳转，但是如果是_blank的链接还是看不到效果的）

 

下面是整个demo的源码

(function(){
    /*
    transition支持
    IE10+
    FF28+
    安卓4.4+ （4.4以下加前缀）
    ios7.0+（7.0以下加前缀）
    opera20+
    */
    /**样式兼容**/
    function prefixStyle (style) {
        if ( vendor === '' ) return style;
        style = style.charAt(0).toUpperCase() + style.substr(1);
        //console.log(style)
        return vendor + style;
    };
    var dummyStyle = document.createElement('div').style,
        vendor = (function () {
            var vendors = 't,webkitT,MozT,msT,OT'.split(','),
                t,
                i = 0,
                l = vendors.length;
            for ( ; i < l; i++ ) {
                t = vendors[i] + 'ransform';
                if ( t in dummyStyle ) {
                    //alert(vendors[i])
                    return vendors[i].substr(0, vendors[i].length - 1);
                }
            }
            return false;
        })(),
        cssVendor = vendor ? '-' + vendor.toLowerCase() + '-' : '',//本demo没用到，可以给添加cssText备用
        transition = prefixStyle('transition');//
        alert(transition)
    /**事件兼容**/
    var hasTouch = 'ontouchstart' in window,
        startEvent = hasTouch ? 'touchstart' : 'mousedown',
        moveEvent = hasTouch ? 'touchmove' : 'mousemove',
        endEvent = hasTouch ? 'touchend' : 'mouseup',
        cancelEvent = hasTouch ? 'touchcancel' : 'mouseup';
    transitionEndEvent = (function () {
        if ( vendor === false ) return false;
        var transitionEnd = {
                ''          : 'transitionend',
                'webkit'    : 'webkitTransitionEnd',
                'Moz'       : 'transitionend',
                'O'         : 'oTransitionEnd',
                'ms'        : 'MSTransitionEnd'
            };
        return transitionEnd[vendor];
    })();
    //alert(transitionEndEvent)
    var point = document.createElement('div'),
        canclick = true,
        ahref = '';
    point.style.cssText = '10px;height:10px;border-radius:100px;border:1px solid #f60;position: absolute;left:0;top:0;opacity:0;';
    document.body.appendChild(point);
    window.addEventListener(startEvent, mDown,true);
    point.addEventListener(transitionEndEvent, tEnd,false);
    function mDown(e){
        e = e || window.event;
        e.preventDefault();
        if(!canclick) {return;}
        canclick = false;
        var evt = hasTouch ? e.touches[0] : e;
            point.style.left = evt.pageX-15 +'px';
            point.style.top = evt.pageY-15 +'px';
            point.style.width = point.style.height = '10px';
            point.style.transition = '';
        setTimeout(function(){
            point.style.transition  = 'all 400ms ease-in';
            point.style.opacity = '1';
            point.style.width = point.style.height = '30px';
        }, 50)
    }
    function tEnd(){
        point.style.opacity = '0';
        point.style.width = point.style.height = '40px';
        point.style.transition = 'all 300ms ease-out';
        canclick = true;
    }
})()