transition兼容性:
封装一个js来验证浏览器是否兼容transition,以及选择兼容的写法
以下是transition.js
(function(){ //判断transition属性是否存在 存在:空字符串 不存在:undefined console.log(document.body.style.transition); var transitionName={ transition:"transitionend",mozTransition:"transitionend" }; var transitionEnd=""; var isSupport=false; for(var name in transitionName){ if(document.body.style[name]!="undefined"){ 说明存在 transitionEnd=transitionName[name]; isSupport=true; break; } } 将局部变量作为一个全局变量的属性 window.mt=window.mt || {};如果存在则继续存在,不存在则创建一个空对象 window.mt.transition=transitionEnd; window.mt.isSupport=isSupport; })();
使用方法:
在页面引入该transition.js
window.mt.transition 判断浏览器支持的transition写法
window.mt.isSupport 判断浏览器是否支持transition
(window.mt是随意命名的一个全局变量,随你怎么命名)
<!DOCTYPE html> <html lang="zh-CN"><!-- 设置简体中文 --> head> meta charset="UTF-8"title>index</bodyscript src="js/jquery.js"></script="js/transition.js"> console.log(window.mt.transition);//transitionend console.log(window.mt.isSupport);true html>