diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2d26d31 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +*.un~ +/.DS_Store diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..85bd835 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 qiqiboy + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md index c4af103..a416999 100644 --- a/README.md +++ b/README.md @@ -18,8 +18,27 @@ JS2CSSKeyframes就是解决这个问题的，它可以自动根据不同浏览 * @-moz-keyframes test { from { -moz-transform:translate(0,0) } to { -moz-transform:translate(100px,100px) } } * @keyframes test { from { transform:translate(0,0) } to { transform:translate(100px,100px) } } +## 安装 +``` +npm install js2css3 --save +``` -## 如何使用 +## 开始使用 + +有两种情况： +#### 使用JS2CSSKeyframes创建自定义动画 +```js +import JS2CSSKeyframes from 'js2css3'; + +new JS2CSSKeyframes(...); +``` + +#### 使用自带的动画插件 +```js +import 'js2css3/css3-animation'; +``` + +## 使用示例 ```javascript /* @description 创建css3动画 diff --git a/css3-animation.js b/css3-animation.js index cb04f6a..68369aa 100755 --- a/css3-animation.js +++ b/css3-animation.js @@ -2,74 +2,74 @@ * @author qiqiboy * @github https://github.com/qiqiboy/JS2CSSKeyframes */ -; -(function(ROOT, struct, undefined){ - "use strict"; - - if(typeof define=='function' && define.amd){ - define(['JS2CSSKeyframes'],function(js2ck){ - if(js2ck.support){ +(function(ROOT, struct, undefined) { + if (typeof window === 'undefined') return; + + if (typeof module == 'object') { + module.exports = struct(require('./src/j2ckf')); + } else if (typeof define == 'function' && define.amd) { + require(['./src/j2ckf'], function(js2ck) { + if (js2ck.support) { return struct(js2ck); } }); - }else if(JS2CSSKeyframes.support){ - ROOT.css3Ani=struct(JS2CSSKeyframes); + } else if (JS2CSSKeyframes.support) { + ROOT.css3Ani = struct(JS2CSSKeyframes); } - -})(window, function(JS2KF){ - var styleSheet=JS2KF.getSheet(); - var css3Ani={}; - var CONFIG={ - bounce:{ - '20,50,80,100':'transform:translate(0)', - '40':'transform:translateY(-30px)', - '60':'transform:translateY(-15px)' +})(typeof window === 'undefined' ? global : window, function(JS2KF) { + var styleSheet = JS2KF.getSheet(); + var css3Ani = {}; + var CONFIG = { + bounce: { + '20,50,80,100': 'transform:translate(0)', + '40': 'transform:translateY(-30px)', + '60': 'transform:translateY(-15px)' }, - bounceIn:{ - '0':'transform:scale(0.3);opacity:0', - '50':'transform:scale(1.05);opacity:1', - '75':'transform:scale(0.9)', - '100':'transform:scale(1)' + bounceIn: { + '0': 'transform:scale(0.3);opacity:0', + '50': 'transform:scale(1.05);opacity:1', + '75': 'transform:scale(0.9)', + '100': 'transform:scale(1)' }, - bounceOut:{ - '100':'transform:scale(0.3);opacity:0', - '50':'transform:scale(1.1);opacity:1', - '25':'transform:scale(0.96)' + bounceOut: { + '100': 'transform:scale(0.3);opacity:0', + '50': 'transform:scale(1.1);opacity:1', + '25': 'transform:scale(0.96)' }, - flash:{ - '50,100':'opacity:1;', - '25,75':'opacity:0;' + flash: { + '50,100': 'opacity:1;', + '25,75': 'opacity:0;' }, - shake:{ - '10,30,50,70,90':'transform:translateX(-10px)', - '20,40,60,80':'transform:translateX(10px)', - '100':'transform:translateX(0)' + shake: { + '10,30,50,70,90': 'transform:translateX(-10px)', + '20,40,60,80': 'transform:translateX(10px)', + '100': 'transform:translateX(0)' }, - rubberBand:{ - '30':'transform:scale(1.25,0.75)', - '40':'transform:scale(0.75,1.25)', - '50':'transform:scale(1.15,0.85)', - '65':'transform:scale(.95,1.05)', - '75':'transform:scale(1.05,.95)', - '100':'transform:scale(1,1)' + rubberBand: { + '30': 'transform:scale(1.25,0.75)', + '40': 'transform:scale(0.75,1.25)', + '50': 'transform:scale(1.15,0.85)', + '65': 'transform:scale(.95,1.05)', + '75': 'transform:scale(1.05,.95)', + '100': 'transform:scale(1,1)' }, - tada:{ - '10,20':'transform:scale(.9) rotate(-3deg)', - '30,50,70,90':'transform:scale(1.1) rotate(3deg)', - '40,60,80':'transform:scale(1.1) rotate(-3deg)', - '100':'transform:scale(1) rotate(0)' + tada: { + '10,20': 'transform:scale(.9) rotate(-3deg)', + '30,50,70,90': 'transform:scale(1.1) rotate(3deg)', + '40,60,80': 'transform:scale(1.1) rotate(-3deg)', + '100': 'transform:scale(1) rotate(0)' }, - hinge:{ - '0':'transform-origin:0 0', - '20,60':'transform-origin:0 0;transform:rotate(30deg)', - '40,80':'transform-origin:0 0;transform:rotate(60deg);opacity:1', - '100':'transform-origin:0 0;transform:translateY(200%);opacity:0' + hinge: { + '0': 'transform-origin:0 0', + '20,60': 'transform-origin:0 0;transform:rotate(30deg)', + '40,80': 'transform-origin:0 0;transform:rotate(60deg);opacity:1', + '100': 'transform-origin:0 0;transform:translateY(200%);opacity:0' }, - pulse:{ - '50':'transform:scale(1.05)', - '100':'transform:scale(1)' + pulse: { + '50': 'transform:scale(1.05)', + '100': 'transform:scale(1)' }, - wiggle:[ + wiggle: [ 'transform:skewX(-10deg)', 'transform:skewX(9deg)', 'transform:skewX(-8deg)', @@ -82,7 +82,7 @@ 'transform:skewX(1deg)', 'transform:skewX(0)' ], - swing:[ + swing: [ '', 'transform:rotate(15deg)', 'transform:rotate(-10deg)', @@ -90,7 +90,7 @@ 'transform:rotate(-5deg)', 'transform:rotate(0)' ], - wobble:[ + wobble: [ '', 'transform:translateX(-100px) rotate(-5deg)', 'transform:translateX(80px) rotate(3deg)', @@ -99,66 +99,93 @@ 'transform:translateX(-20px) rotate(-1deg)', 'transform:translateX(0) rotate(0)' ], - ring:{ - '10,20':'transform:scale(0.9) rotate(-3deg)', - '30,50,70,90':'transform:scale(1.1) rotate(3deg)', - '40,60,80':'transform:scale(1.1) rotate(-3deg)', - '100':'transform:scale(1) rotate(0)' + ring: { + '10,20': 'transform:scale(0.9) rotate(-3deg)', + '30,50,70,90': 'transform:scale(1.1) rotate(3deg)', + '40,60,80': 'transform:scale(1.1) rotate(-3deg)', + '100': 'transform:scale(1) rotate(0)' }, - rotate360:['','transform:rotate(360deg)'] + rotate360: ['', 'transform:rotate(360deg)'] }; - "X Y".split(" ").forEach(function(prop){ - var dir=prop=='X'?'Y':'X'; - CONFIG['flip'+prop]={ - '50':'transform:perspective(400px) translateZ(150px) rotate'+dir+'(170deg)', - '60':'transform:perspective(400px) translateZ(150px) rotate'+dir+'(190deg)', - '100':'transform:perspective(400px) rotate'+dir+'(360deg)' - }; - - CONFIG['flipin'+prop]={ - '0':'transform:perspective(400px) rotate'+prop+'(90deg);opacity:0', - '40':'transform:perspective(400px) rotate'+prop+'(-10deg);opacity:1', - '70':'transform:perspective(400px) rotate'+prop+'(10deg)', - '100':'transform:perspective(400px) rotate'+prop+'(0)' - }; - - CONFIG['flipout'+prop]={ - '50':'opacity:1', - '100':'transform:perspective(400px) rotate'+prop+'(90deg);opacity:0' - }; + 'X Y'.split(' ').forEach(function(prop) { + var dir = prop == 'X' ? 'Y' : 'X'; + + CONFIG['flip' + prop] = { + '50': 'transform:perspective(400px) translateZ(150px) rotate' + dir + '(170deg)', + '60': 'transform:perspective(400px) translateZ(150px) rotate' + dir + '(190deg)', + '100': 'transform:perspective(400px) rotate' + dir + '(360deg)' + }; + + CONFIG['flipin' + prop] = { + '0': 'transform:perspective(400px) rotate' + prop + '(90deg);opacity:0', + '40': 'transform:perspective(400px) rotate' + prop + '(-10deg);opacity:1', + '70': 'transform:perspective(400px) rotate' + prop + '(10deg)', + '100': 'transform:perspective(400px) rotate' + prop + '(0)' + }; + + CONFIG['flipout' + prop] = { + '50': 'opacity:1', + '100': 'transform:perspective(400px) rotate' + prop + '(90deg);opacity:0' + }; }); - "In Out ".split(" ").forEach(function(prop,i){ - var call=i%2?'reverse':'slice', - out=prop?'opacity:0;':''; - prop && (CONFIG['fade'+prop]=['opacity:0',''][call]()); - CONFIG['roll'+prop]=[out+'transform:translateX(-100px) rotate(-120deg)','transform:translateX(0) rotate(0)'][call](); - CONFIG['scale'+prop]=[out+'transform:scale(0)','transform:scale(1)'][call](); - CONFIG['zoom'+prop]=[out+'transform:scale(2)','transform:scale(1)'][call](); - CONFIG['flyTop'+prop]=[out+'transform:translateY(-50px)','transform:translateY(0)'][call](); - CONFIG['flyRight'+prop]=[out+'transform:translateX(50px)','transform:translateX(0)'][call](); - CONFIG['flyBottom'+prop]=[out+'transform:translateY(50px)','transform:translateY(0)'][call](); - CONFIG['flyLeft'+prop]=[out+'transform:translateX(-50px)','transform:translateX(0)'][call](); - CONFIG['rotate'+prop]=[out+'transform:rotate(-200deg)','transform:rotate(0)'][call](); - CONFIG['lightSpeed'+prop]=[out+'transform:translateX(100%) skewX(-30deg)','transform:translateX(0) skewX(0)'][call](); - CONFIG['slideX'+prop]=[out+'width:0;overflow:hidden','overflow:hidden'][call](); - CONFIG['slideY'+prop]=[out+'height:0;overflow:hidden','overflow:hidden'][call](); + 'In Out '.split(' ').forEach(function(prop, i) { + var call = i % 2 ? 'reverse' : 'slice', + out = prop ? 'opacity:0;' : ''; + + prop && (CONFIG['fade' + prop] = ['opacity:0', ''][call]()); + + CONFIG['roll' + prop] = [ + out + 'transform:translateX(-100px) rotate(-120deg)', + 'transform:translateX(0) rotate(0)' + ][call](); + + CONFIG['scale' + prop] = [out + 'transform:scale(0)', 'transform:scale(1)'][call](); + CONFIG['zoom' + prop] = [out + 'transform:scale(2)', 'transform:scale(1)'][call](); + CONFIG['flyTop' + prop] = [out + 'transform:translateY(-50px)', 'transform:translateY(0)'][call](); + CONFIG['flyRight' + prop] = [out + 'transform:translateX(50px)', 'transform:translateX(0)'][call](); + CONFIG['flyBottom' + prop] = [out + 'transform:translateY(50px)', 'transform:translateY(0)'][call](); + CONFIG['flyLeft' + prop] = [out + 'transform:translateX(-50px)', 'transform:translateX(0)'][call](); + CONFIG['rotate' + prop] = [out + 'transform:rotate(-200deg)', 'transform:rotate(0)'][call](); + + CONFIG['lightSpeed' + prop] = [ + out + 'transform:translateX(100%) skewX(-30deg)', + 'transform:translateX(0) skewX(0)' + ][call](); + + CONFIG['slideX' + prop] = [out + 'width:0;overflow:hidden', 'overflow:hidden'][call](); + CONFIG['slideY' + prop] = [out + 'height:0;overflow:hidden', 'overflow:hidden'][call](); }); - - Object.keys(CONFIG).forEach(function(name){ - css3Ani[name]=JS2KF(name,CONFIG[name]); + + Object.keys(CONFIG).forEach(function(name) { + css3Ani[name] = JS2KF(name, CONFIG[name]); //生成1s ease曲线执行的css类，如 .a-flyTopIn { -webkit-animation: flyTopIn 1s ease } - styleSheet.insertRule('.a-'+name+' { '+JS2KF['animation-css']+': '+name+' 1s ease both }',styleSheet.cssRules.length); + styleSheet.insertRule( + '.a-' + name + ' { ' + JS2KF['animation-css'] + ': ' + name + ' 1s ease both }', + styleSheet.cssRules.length + ); }); - - var delay=100; - while(delay<10000){ - styleSheet.insertRule('.delay'+delay+'{ '+JS2KF['animation-delay']+': '+delay+'ms !important; '+JS2KF['animation-fill-mode']+': both !important }',styleSheet.cssRules.length); - delay+=delay<3000?100:1000; + var delay = 100; + + while (delay < 10000) { + styleSheet.insertRule( + '.delay' + + delay + + '{ ' + + JS2KF['animation-delay'] + + ': ' + + delay + + 'ms !important; ' + + JS2KF['animation-fill-mode'] + + ': both !important }', + styleSheet.cssRules.length + ); + + delay += delay < 3000 ? 100 : 1000; } - + return css3Ani; }); diff --git a/package.json b/package.json new file mode 100644 index 0000000..5397317 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "js2css3", + "version": "1.0.2", + "description": "Create CSS3 keyframes animation from javascript. 使用JS动态创建管理CSS3 Animations。", + "main": "src/j2ckf.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://qiqiboy@github.com/qiqiboy/JS2CSSKeyframes.git" + }, + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/qiqiboy/JS2CSSKeyframes/issues" + }, + "homepage": "https://github.com/qiqiboy/JS2CSSKeyframes#readme" +} diff --git a/src/j2ckf.js b/src/j2ckf.js index f58c8a3..931ebcf 100755 --- a/src/j2ckf.js +++ b/src/j2ckf.js @@ -2,264 +2,319 @@ * @author qiqiboy * @github https://github.com/qiqiboy/JS2CSSKeyframes */ -; -(function(ROOT, struct, undefined){ - "use strict"; - - var doc=document, - slice=[].slice, - CSSRule=ROOT.CSSRule||{}, - IMPORT_RULE=CSSRule.IMPORT_RULE, - MEDIA_RULE=CSSRule.MEDIA_RULE, - KEYFRAMES_RULE=CSSRule.KEYFRAMES_RULE||CSSRule.WEBKIT_KEYFRAMES_RULE||CSSRule.MOZ_KEYFRAMES_RULE||CSSRule.O_KEYFRAMES_RULE, - divstyle=document.documentElement.style, - cssVendor=function(){ - var tests="-webkit- -moz- -o- -ms-".split(" "), +(function(ROOT, struct, undefined) { + if (typeof exports === 'object') { + module.exports = struct; + } else if (typeof define == 'function' && define.amd) { + define('JS2CSSKeyframes', function() { + return struct; + }); + } else ROOT.JS2CSSKeyframes = struct; + + if (typeof window === 'undefined') { + return; + } + + var doc = document, + slice = [].slice, + CSSRule = ROOT.CSSRule || {}, + IMPORT_RULE = CSSRule.IMPORT_RULE, + MEDIA_RULE = CSSRule.MEDIA_RULE, + KEYFRAMES_RULE = + CSSRule.KEYFRAMES_RULE || + CSSRule.WEBKIT_KEYFRAMES_RULE || + CSSRule.MOZ_KEYFRAMES_RULE || + CSSRule.O_KEYFRAMES_RULE, + divstyle = document.documentElement.style, + cssVendor = (function() { + var tests = '-webkit- -moz- -o- -ms-'.split(' '), prop; - while(prop=tests.shift()){ - if(camelCase(prop+'animation') in divstyle){ + + while ((prop = tests.shift())) { + if (camelCase(prop + 'animation') in divstyle) { return prop; } } + return ''; - }(), - KEY_REG=new RegExp('@(?:'+cssVendor+')?keyframes','i'), - animation=fixCSS3('animation'), - keyframes='@'+animation.replace('animation','keyframes'); + })(), + KEY_REG = new RegExp('@(?:' + cssVendor + ')?keyframes', 'i'), + animation = fixCSS3('animation'), + keyframes = '@' + animation.replace('animation', 'keyframes'); - function getSheet(){ //获取可以用的样式以用来插入css3 keyframes - var n=0, + function getSheet() { + //获取可以用的样式以用来插入css3 keyframes + var n = 0, sheet, style; - while(sheet=doc.styleSheets.item(n++)){ - try{ - if(sheet.cssRules){ + + while ((sheet = doc.styleSheets.item(n++))) { + try { + if (sheet.cssRules) { return sheet; } - }catch(e){} + } catch (e) {} } - style=doc.createElement('style'); - style.type='text/css'; + style = doc.createElement('style'); + style.type = 'text/css'; doc.getElementsByTagName('head')[0].appendChild(style); - + return style.sheet; } - function camelCase(str){ - return (str+'').replace(/^-ms-/, 'ms-').replace(/-([a-z]|[0-9])/ig, function(all, letter){ - return (letter+'').toUpperCase(); + function camelCase(str) { + return (str + '').replace(/^-ms-/, 'ms-').replace(/-([a-z]|[0-9])/gi, function(all, letter) { + return (letter + '').toUpperCase(); }); } - function iterateSheet(callback){ - slice.call(doc.styleSheets).forEach(function getRule(sheet){ - slice.call(sheet.cssRules).forEach(function(rule,i){ - if(rule.type==IMPORT_RULE){//imported css - getRule(rule.styleSheet||rule.sheet); - }else if(rule.type==MEDIA_RULE){ + function iterateSheet(callback) { + slice.call(doc.styleSheets).forEach(function getRule(sheet) { + slice.call(sheet.cssRules).forEach(function(rule, i) { + if (rule.type == IMPORT_RULE) { + //imported css + getRule(rule.styleSheet || rule.sheet); + } else if (rule.type == MEDIA_RULE) { getRule(rule); - }else if(rule.type==KEYFRAMES_RULE){ - callback(rule,i,sheet); + } else if (rule.type == KEYFRAMES_RULE) { + callback(rule, i, sheet); } }); }); } - function fixCSS3(name){ - var prop=camelCase(name), - _prop=camelCase(cssVendor+prop); - return (prop in divstyle) && name || (_prop in divstyle) && cssVendor+name || name; + function fixCSS3(name) { + var prop = camelCase(name), + _prop = camelCase(cssVendor + prop); + + return (prop in divstyle && name) || (_prop in divstyle && cssVendor + name) || name; } - function fixKey(key){ - return {from:'0%',to:'100%'}[key]||(key+'').replace('%','')+'%'; + function fixKey(key) { + return { from: '0%', to: '100%' }[key] || (key + '').replace('%', '') + '%'; } - - function getKeyframesStyle(keys,name){ - var cssText=""; - if(typeof keys=='string'){ - if(KEY_REG.test(keys)){ - return keys.replace(KEY_REG,keyframes); + + function getKeyframesStyle(keys, name) { + var cssText = ''; + + if (typeof keys == 'string') { + if (KEY_REG.test(keys)) { + return keys.replace(KEY_REG, keyframes); } - cssText=keys.replace(/^\s*{\s*(?={)|}\s*(?=}\s*$)/gi,''); - }else if(Array.isArray(keys)){ - cssText=keys.map(function(rule,i){ - return (i/(keys.length-1)*100||0)+'%'+' { '+getKeyframesRule(rule)+' }'; - }).join(' '); - }else if(keys){ - cssText=Object.keys(keys).map(function(key){ - var ruleText=getKeyframesRule(keys[key]); - return splitKey(key).map(function(k){ - return fixKey(k)+' { '+ruleText+' }'; - }).join(' '); - }).join(' '); + + cssText = keys.replace(/^\s*{\s*(?={)|}\s*(?=}\s*$)/gi, ''); + } else if (Array.isArray(keys)) { + cssText = keys + .map(function(rule, i) { + return ((i / (keys.length - 1)) * 100 || 0) + '%' + ' { ' + getKeyframesRule(rule) + ' }'; + }) + .join(' '); + } else if (keys) { + cssText = Object.keys(keys) + .map(function(key) { + var ruleText = getKeyframesRule(keys[key]); + + return splitKey(key) + .map(function(k) { + return fixKey(k) + ' { ' + ruleText + ' }'; + }) + .join(' '); + }) + .join(' '); } - return keyframes+' '+name+' { '+cssText+' }'; + return keyframes + ' ' + name + ' { ' + cssText + ' }'; } - function getKeyframesRule(rule){ - var ruleText=""; - if(typeof rule=='string'){ - ruleText=getKeyframesRule(rule.split(/\s*;\s*/g)); - }else if(Array.isArray(rule)){ - ruleText=getKeyframesRule(rule.reduce(function(obj,text){ - var ret=text.split(/\s*:\s*/); - if(ret.length>1){ - obj[ret[0]]=ret[1]; - } - return obj; - },{})); - }else if(rule){ - ruleText=Object.keys(rule).map(function(key){ - return fixCSS3(key)+': '+rule[key]+';'; - }).join(' '); + function getKeyframesRule(rule) { + var ruleText = ''; + + if (typeof rule == 'string') { + ruleText = getKeyframesRule(rule.split(/\s*;\s*/g)); + } else if (Array.isArray(rule)) { + ruleText = getKeyframesRule( + rule.reduce(function(obj, text) { + var ret = text.split(/\s*:\s*/); + + if (ret.length > 1) { + obj[ret[0]] = ret[1]; + } + + return obj; + }, {}) + ); + } else if (rule) { + ruleText = Object.keys(rule) + .map(function(key) { + return fixCSS3(key) + ': ' + rule[key] + ';'; + }) + .join(' '); } return ruleText; } - function splitKey(key){ - return (key+'').trim().split(/\s*[\s,]\s*/); + function splitKey(key) { + return (key + '').trim().split(/\s*[\s,]\s*/); } - struct.prototype={ - constructor:struct, - init:function(name, keys){ + struct.prototype = { + constructor: struct, + init: function(name, keys) { var ckf; //CSSKeyframes - if(!struct.support)return this; - if(typeof name=='object' || KEY_REG.test(name)){ - if(name.cssRules && name.type==KEYFRAMES_RULE){ - ckf=name; - }else{ - keys=name; - name=null; + + if (!struct.support) return this; + + if (typeof name == 'object' || KEY_REG.test(name)) { + if (name.cssRules && name.type == KEYFRAMES_RULE) { + ckf = name; + } else { + keys = name; + name = null; } } - if(!name){ - name='js2keyframes-'+parseInt(Math.random()*1e10); + if (!name) { + name = 'js2keyframes-' + parseInt(Math.random() * 1e10); } - if(!ckf){ - var sheet=getSheet(), - id=sheet.insertRule(getKeyframesStyle(keys,name),sheet.cssRules.length); - ckf=sheet.cssRules[id]; + if (!ckf) { + var sheet = getSheet(), + id = sheet.insertRule(getKeyframesStyle(keys, name), sheet.cssRules.length); + + ckf = sheet.cssRules[id]; } - this.keyframesRule=ckf||{}; + this.keyframesRule = ckf || {}; return this.extract(); }, - extract:function(){ - this.keyframes=slice.call(this.cssRules).reduce(function(obj,rule){ - obj[rule.keyText]=rule; + extract: function() { + this.keyframes = slice.call(this.cssRules).reduce(function(obj, rule) { + obj[rule.keyText] = rule; + return obj; - },{}); + }, {}); return this; }, - get:function(name){ + get: function(name) { return this.keyframes[fixKey(splitKey(name)[0])]; }, - add:function(name,value){ - var frameRule=this.keyframesRule, - insert='appendRule' in frameRule?'appendRule':'insertRule', + add: function(name, value) { + var frameRule = this.keyframesRule, + insert = 'appendRule' in frameRule ? 'appendRule' : 'insertRule', ruleText; - if(typeof name=='object'){ - for(var key in name){ + + if (typeof name == 'object') { + for (var key in name) { this.add(key, name[key]); } - }else{ - ruleText=getKeyframesRule(value); - splitKey(name).forEach(function(k){ - this.remove(k); - frameRule[insert](fixKey(k)+' { '+ruleText+' }'); - }.bind(this)); + } else { + ruleText = getKeyframesRule(value); + + splitKey(name).forEach( + function(k) { + this.remove(k); + frameRule[insert](fixKey(k) + ' { ' + ruleText + ' }'); + }.bind(this) + ); } return this.extract(); }, - remove:function(name){ - var frameRule=this.keyframesRule; - splitKey(name).forEach(function(k){ + remove: function(name) { + var frameRule = this.keyframesRule; + + splitKey(name).forEach(function(k) { frameRule.deleteRule(fixKey(k)); }); + return this.extract(); }, - clear:function(){ - slice.call(this.cssRules).forEach(function(rule){ - this.remove(rule.keyText); - }.bind(this)); + clear: function() { + slice.call(this.cssRules).forEach( + function(rule) { + this.remove(rule.keyText); + }.bind(this) + ); + return this.extract(); } - } - - var extend={ - vendor:cssVendor, - get:function(name){ + }; + + var extend = { + vendor: cssVendor, + get: function(name) { return this.CSSKeyframes[name]; }, - add:function(){ - return this.apply(null,arguments); + add: function() { + return this.apply(null, arguments); }, - remove:function(name){ - iterateSheet(function(rule,i,sheet){ - if(rule.name==(name.name||name)) - sheet.deleteRule(i); + remove: function(name) { + iterateSheet(function(rule, i, sheet) { + if (rule.name == (name.name || name)) sheet.deleteRule(i); }); + return true; }, - getSheet:getSheet, - 'animation-css':animation, - animation:camelCase(animation), - support:camelCase(animation) in divstyle - } + getSheet: getSheet, + 'animation-css': animation, + animation: camelCase(animation), + support: camelCase(animation) in divstyle + }; - if(typeof Object.defineProperties=='function'){ - - "name duration timing-function delay iteration-count direction play-state fill-mode".split(" ").forEach(function(prop){ - var name='animation-'+prop, - caseName=camelCase(name); - struct[caseName]=camelCase(struct[name]=fixCSS3(name)); - }); + if (typeof Object.defineProperties == 'function') { + 'name duration timing-function delay iteration-count direction play-state fill-mode' + .split(' ') + .forEach(function(prop) { + var name = 'animation-' + prop, + caseName = camelCase(name); + + struct[caseName] = camelCase((struct[name] = fixCSS3(name))); + }); - Object.keys(extend).forEach(function(name){ - struct[name]=extend[name]; + Object.keys(extend).forEach(function(name) { + struct[name] = extend[name]; }); - "name cssText cssRules".split(" ").forEach(function(prop){ - Object.defineProperty(struct.prototype,prop,{ - get:function(){ - return (this.keyframesRule||{})[prop]; + 'name cssText cssRules'.split(' ').forEach(function(prop) { + Object.defineProperty(struct.prototype, prop, { + get: function() { + return (this.keyframesRule || {})[prop]; }, - enumerable:true + enumerable: true }); }); - Object.defineProperty(struct,'CSSKeyframes',{ - get:function(){ - var ret={}; - iterateSheet(function(rule){ - ret[rule.name]=this(rule); - }.bind(this)); + Object.defineProperty(struct, 'CSSKeyframes', { + get: function() { + var ret = {}; + + iterateSheet( + function(rule) { + ret[rule.name] = this(rule); + }.bind(this) + ); + return ret; }, - enumerable:true + enumerable: true }); - } - if(typeof define=='function' && define.amd){ - define('JS2CSSKeyframes',function(){ + if (typeof exports === 'object') { + module.exports = struct; + } else if (typeof define == 'function' && define.amd) { + define('JS2CSSKeyframes', function() { return struct; }); - }else ROOT.JS2CSSKeyframes=struct; - -})(window, function(name, keys){ - if(!(this instanceof arguments.callee)){ + } else ROOT.JS2CSSKeyframes = struct; +})(typeof window === 'undefined' ? global : window, function(name, keys) { + if (!(this instanceof arguments.callee)) { return new arguments.callee(name, keys); } - arguments.callee.support&&this.init(name, keys); + + arguments.callee.support && this.init(name, keys); });