最近在做个小效果，没想到引出了几个以前的没认真去自己探讨的兼容问题，最后虽然这个效果还是不是很满意，但在这里想分享一下过程
首先想做的效果是 每次点击页面时，出现一个小波纹，然后自动消失
可以先看一下demo
到最后实现后，发现这个效果实用性不是很高，但是过程引出了一些值得积累的问题
引出知识点：
transition的兼容支持
事件兼容
transitionend的兼容
如果我out了，请点击关闭
首先看一下 transition 的兼容性
<span style="font-size: 14px;">IE10+</span><br><span style="font-size: 14px;">FF28+</span><br><span style="font-size: 14px;">安卓4.4+ （4.4以下加前缀）</span><br><span style="font-size: 14px;">ios7.0+（7.0以下加前缀）</span><br><span style="font-size: 14px;">opera20+</span>
可以看到，主要兼容是在移动端，所以我通过prefixStyle函数去解决
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
/**样式兼容**/ 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等一系列事件
|
1
2
3
4
5
6 |
/**事件兼容**/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）居然是大写......
|
1
2
3
4
5
6
7
8
9
10
11 |
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的源码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82 |
(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 = ‘width: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; }})() |
原文：http://www.cnblogs.com/ljack/p/3721733.html