最近在做个小效果，没想到引出了几个以前的没认真去自己探讨的兼容问题，最后虽然这个效果还是不是很满意，但在这里想分享一下过程
首先想做的效果是 每次点击页面时，出现一个小波纹，然后自动消失
可以先看一下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;
}
})()