├── package.json ├── README.md └── index.js /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css3support", 3 | "version": "1.0.0", 4 | "description": "css3 support", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/yangbo5207/css3support.git" 12 | }, 13 | "keywords": [ 14 | "css3support" 15 | ], 16 | "author": "18301022997@qq.com", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/yangbo5207/css3support/issues" 20 | }, 21 | "homepage": "https://github.com/yangbo5207/css3support#readme" 22 | } 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 提供一些工具方法以便处理与css3相关兼容性的问题。 2 | 3 | #### 下载： 4 | 5 | ```js 6 | > npm install css3support 7 | ``` 8 | 9 | #### 使用 10 | 11 | ```js 12 | import { type, camelCase, getCssPrefix } from 'css3support'; 13 | ``` 14 | 15 | 具体提供的方法如下。 16 | 17 | ### type 18 | 19 | 判断值的具体类型。 20 | 21 | ```js 22 | import { type } from 'css3support'; 23 | 24 | function fn() {} 25 | let reg = /^123[a-z]{0, 10}/g; 26 | 27 | console.log(type(0)); // number 28 | console.log(type(false)); // boolean 29 | console.log(type('hello')); // string 30 | console.log(type(null)); // null 31 | console.log(type(type.a)); // undefined 32 | console.log(type(NaN)); // number 33 | console.log(type([1, 2])); // array 34 | console.log(type({name: 'bo'})); // object 35 | console.log(type(fn)); // function 36 | console.log(type(reg)); // regexp 37 | console.log(type(new Date())); // date 38 | console.log(type(new Error())); // error 39 | ``` 40 | 41 | ### camelCase 42 | 43 | 将css属性兼容性写法，转化为对应的js特性值。 44 | 45 | ```js 46 | import { camelCase } from 'css3support'; 47 | 48 | console.log(camelCase('-webkit-animation')); // WebkitAnimation 49 | console.log(camelCase('-moz-animation')); // MozAnimation 50 | console.log(camelCase('-o-animation')); // OAnimation 51 | console.log(camelCase('-ms-animation')); // msAnimation 52 | ``` 53 | 54 | ### toFirstUpperCase 55 | 56 | 字符串首字母转化为大写 57 | 58 | ```js 59 | import { toFirstUpperCase } from 'css3support'; 60 | 61 | console.log(toFirstUpperCase('hello')); // Hello 62 | ``` 63 | 64 | ### getCssPrefix 65 | 66 | 获取浏览器支持的css3前缀。如果浏览器版本比较新，对css3属性直接支持，则返回空字符串。可以通过传入特定的css属性来判断该属性的兼容性，如果为未传入，则根据transform来判断。 67 | 68 | ```js 69 | import { getCssPrefix } from 'css3support'; 70 | 71 | console.log(getCssPrefix()); // '' || -webkit- || -moz- || -o- || -ms- 72 | getCssPrefix('transition'); 73 | ``` 74 | 75 | ### getCapitalPrefix 76 | 77 | 获取浏览器支持的css3特性值前缀。主要针对transitionend, animationend等事件兼容性写法，与属性特性值略有不同。 78 | 79 | ```js 80 | import { getCapitalPrefix } from 'css3support'; 81 | 82 | console.log(getCapitalPrefix()); // ['', 'webkit', 'moz', 'o', 'MS']; 取其一 83 | ``` 84 | 85 | ### getAttrName 86 | 87 | 得到浏览器支持的对应css属性的特性值。 88 | 89 | ```js 90 | import { getAttrName } from 'css3support'; 91 | getAttrName('transition'); // WebkitTransition 92 | ``` 93 | 94 | ### getEventName 95 | 96 | 获取浏览器支持的事件名，包括 animationstart, animationcancel, animationend, transitionend 等常用动画事件。 97 | 98 | ```js 99 | import { getEventName } from 'css3support'; 100 | getEventName('animationend'); // MSAnimationend 101 | ``` 102 | 103 | ### animationFrame 104 | 105 | requestAnimationFrame 与 setTimeout 兼容性方法支持 106 | 107 | ### cancelFrame 108 | 109 | cancelAnimationFrame 与 clearTimeout 兼容性方法支持 110 | 111 | ### getStyle 112 | 113 | 获取元素属性值 114 | 115 | ```js 116 | getStyle(elem, 'height'); // 100px 117 | ``` 118 | 119 | 120 | ### setStyle 121 | 122 | 设置元素属性值 123 | 124 | ```js 125 | setStyle(elem, { 126 | height: '100px' 127 | }) 128 | `` -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // animation 特性值 2 | // var animations = [ 'animation', 'WebkitAnimation', 'MozAnimation', 'OAnimation', 'msAnimation'] 3 | 4 | // var animationends = [ 'animationend', 'webkitAnimationEnd', 'mozAnimationEnd', 'oAnimationEnd', 'MSAnimationEnd' ] 5 | // var transitionends = ['transitionend', 'webkitTransitionEnd', 'mozTransitionEnd', 'oTransitionEnd', 'MSTransitionEnd'] 6 | 7 | let class2type = {}; 8 | const toString = Object.prototype.toString; 9 | const typeArray = 'Boolean Number String Function Array Date RegExp Object Error'.split(' '); 10 | const cssPrefix = ['', '-webkit-', '-moz-', '-o-', '-ms-']; 11 | const captialPrefix = ['', 'webkit', 'moz', 'o', 'MS']; 12 | const div = document.createElement('div'); 13 | 14 | typeArray.forEach(name => { 15 | class2type[`[object ${name}]`] = name.toLowerCase(); 16 | }); 17 | 18 | // 判断数据类型 19 | export const type = value => { 20 | if (value === null) { 21 | return `${value}`; 22 | } 23 | 24 | return typeof value == 'object' || typeof value == 'function' ? class2type[toString.call(value)] : typeof value; 25 | }; 26 | 27 | // -webkit-animation -> WebkitAnimation 28 | export const camelCase = value => { 29 | let str = value.toString(); 30 | return str.replace(/^-ms-/, 'ms-').replace(/-([a-z]|[0-9])/gi, (all, letter) => letter.toUpperCase()); 31 | }; 32 | 33 | // 字符串首字母替换为大写 34 | export const toFirstUpperCase = str => { 35 | return str.replace(/^[a-z]/gi, l => l.toUpperCase()); 36 | }; 37 | 38 | // 获取浏览器支持的css3前缀 39 | export const getCssPrefix = (attr) => { 40 | let attr = attr ? attr : 'transform'; 41 | let prefix = ''; 42 | for (var i = 0; i < cssPrefix.length; i++) { 43 | if (camelCase(`${cssPrefix[i]}${attr}`) in div.style) { 44 | return cssPrefix[i]; 45 | } 46 | } 47 | return prefix; 48 | }; 49 | 50 | export const getCapitalPrefix = () => { 51 | for (var i = 0; i < captialPrefix.length; i++) { 52 | let n = 'requestAnimationFrame'; 53 | if (captialPrefix[i] !== '') { 54 | n = `${captialPrefix[i]}${toFirstUpperCase(n)}`; 55 | } 56 | if (n in window) { 57 | return captialPrefix[i]; 58 | } 59 | } 60 | return false; 61 | }; 62 | 63 | // 获取css属性对应的浏览器支持的js特性值 transform -> transform || WebkitTransform 64 | export const getAttrName = attr => { 65 | let prop = camelCase(attr); 66 | let _prop = camelCase(`${getCssPrefix(attr)}attr`); 67 | return (prop in div.style && prop) || _prop in div.style || ''; 68 | }; 69 | 70 | export const getEventName = name => { 71 | const prefix = getCapitalPrefix(); 72 | if (prefix === false) { 73 | return false; 74 | } 75 | 76 | if (prefix === '') { 77 | return name; 78 | } 79 | 80 | return `${prefix}${toFirstUpperCase(name)}`; 81 | }; 82 | 83 | let lastTime = 0; 84 | export const animationFrame = 85 | window.requestAnimationFrame || 86 | window.webkitRequestAnimationFrame || 87 | window.mozRequestAnimationFrame || 88 | window.msRequestAnimationFrame || 89 | function (callback) { 90 | let curTime = +new Date(); 91 | let delay = Math.max(1000 / 60, 1000 / 60 - (curTime - lastTime)); 92 | lastTime = curTime + delay; 93 | return setTimeout(callback, delay); 94 | }; 95 | 96 | export const cancelFrame = 97 | window.cancelAnimationFrame || 98 | window.webkitCancelAnimationFrame || 99 | window.webkitCancelRequestAnimationFrame || 100 | window.mozCancelRequestAnimationFrame || 101 | window.msCancelRequestAnimationFrame || 102 | clearTimeout; 103 | 104 | export const getStyle = (elem, attr) => { 105 | return window.getComputedStyle 106 | ? window.getComputedStyle(elem, null)[attr] 107 | : elem.currentStyle(attr) || elem.style[attr]; 108 | }; 109 | 110 | export const setStyle = (elem, options) => { 111 | if (type(options) == 'object') { 112 | for (let key in options) { 113 | if (Object.prototype.hasOwnProperty.call(options, key)) { 114 | elem.style[key] = options[key]; 115 | } 116 | } 117 | return true; 118 | } 119 | 120 | return false; 121 | }; 122 | --------------------------------------------------------------------------------