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