Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 

JS2CSSKeyframes

Create CSS3 keyframes animation from javascript.
使用JS动态创建管理CSS3 Animations。

为何使用

随着支持HTML5的普及,页面中使用各种动画的地方越来越多,尤其是一个小型的动画,使用css3来做无疑是既方便又快捷的一个选择。

但是由于浏览器间差异(主要是 webkit 和 moz),我们目前使用css3动画还必须写上各种浏览器前缀,这样无疑给开发工作增添许多麻烦,添加 修改都是无尽的麻烦。在css中预先定义各种动画,每个都要写三遍,无疑又臭又长。

JS2CSSKeyframes就是解决这个问题的,它可以自动根据不同浏览器生成其支持的css3动画@keyframes,省去各种前缀。动画中的css3属性也会自动加入前缀,无需单独书写。

使用 JS2CSSKeyframes 来代替在css中定义css3动画,添加、修改、删除都会变得轻松无比。而且还可以定义复杂无比的css3动画,这是用css无法想象的!!

例如:new JS2CSSKeyframes("test", {from:{transform:'translate(0,0);'},to:{transform:'translate(100px,100px);'}});

在不同浏览器下将会生成以下三种之一

  • @-webkit-keyframes test { from { -webkit-transform:translate(0,0) } to { -webkit-transform:translate(100px,100px) } }
  • @-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创建自定义动画

import JS2CSSKeyframes from 'js2css3';

new JS2CSSKeyframes(...);

使用自带的动画插件

import 'js2css3/css3-animation';

使用示例

/* @description 创建css3动画
 * @Class JS2CSSKeyframes
 * @param String name 名称,可省略该参数,name将随机生成
 * @param String|Object|Array config 动画帧设定
 *
 * @example-1 new JS2CSSKeyframes("test", {
 *              "from":"width:300px;height:100px;",
 *              "50%":"width:30px;height:10px;",
 *              "to":{width:"300px",height:"10px"}
 *           });
 *
 * @example-2 new JS2CSSKeyframes("test1", ["width:300px;height:100px;","width:30px;height:10px;"]);
 *
 * @example-3 new JS2CSSKeyframes("test2", "from {width:300px;height:100px;} to {width:300px;height:100px;}");
 *
 * 注:也可以使用 JS2CSSKeyframes.add(name,config) 来创建动画
 */

//用法一
ani=new JS2CSSKeyframes('ani_1',{
    '0%':{width:0,height:0},
    '50%':{width:'100px',height:'100%'},
    '100%':{width:0,height:0}
});

//用法二
ani=new JS2CSSKeyframes('ani_1',{
    '0%':'width:0;height:0',
    '50%':'width:100px;height:100%;',
    '100%':'width:0;height:0;'
});

//用法三
//均等比例帧可以使用数组省略比例
ani=new JS2CSSKeyframes('ani_1',[
    'width:0;height:0', //0%
    'width:100px;height:100%;', //50%
    'width:0;height:0;' //100%
]);

//用法四
//可以省略名称,name将随机生成,可以通过 .name 来查看生成的名称
ani=new JS2CSSKeyframes([
    'width:0;height:0', //0%
    'width:100px;height:100%;', //50%
    'width:0;height:0;' //100%
]);
console.log(nai.name); //输出 css3Ani_999997712 



//JS2CSSKeyframes实例对象的其它属性及方法说明
//@prop String name 动画名称
console.log(ani.name);

//@prop String cssText 动画内容
console.log(ani.cssText);

//@prop CSSRuleList cssRules 动画帧信息集合
console.dir(ani.cssRules);

//@prop Object keyframes 动画帧对象,键值为比例百分比,0% 50% 等 
console.dir(ani.keyframes);

//@method get(key) 获取指定进度的CSSKeyframeRule帧
ani.get('50%')

//@method add(key,value) 增加进度为key,样式为value的帧
ani.add('70%',{opacity:.5,height:'100px'})

//@method remove(key) 删除进度为key的帧
ani.remove('50%');

//@method clear() 删除所有的帧
ani.clear();



JS2CSSKeyframes.CSSKeyframes //Object 获取页面上所有的css3动画

//JS2CSSKeyframes.get(name) //获取页面上名为name的动画
JS2CSSKeyframes.get('ani_1');

//JS2CSSKeyframes.remove(name) //删除页面上名为name的动画
JS2CSSKeyframes.remove'ani_1');

//JS2CSSKeyframes.add(name,config) //增加动画,同 new JS2CSSKeyframes(name,config);
JS2CSSKeyframes.add("test", {
    "from":"width:300px;height:100px;",
    "50%":"width:30px;height:10px;",
    "to":{width:"300px",height:"10px"}
});

JS2CSSKeyframes.vendor //String 当前浏览器前缀 -webkit -moz- 或空字符串

JS2CSSKeyframes.support //Boolean 是否支持css动画,不支持css3动画的浏览器中调用JS2CSSKeyframes其它方法将会报错

JS2CSSKeyframes["animation-css"] //-webkit-animation
JS2CSSKeyframes["animation"] //webkitAnimation

JS2CSSKeyframes["animation-timing-function"] //-webkit-animation-timing-function
JS2CSSKeyframes["animation-timing-function"] //webkitAnimationTimingFunction

...... //同理支持其他animation的子属性

css3-animation.js

基于JS2CSSKeyframes生成常用css3动画类
具体见css3-animation.js内容
将css3-animation.js引入页面中,即可在css中使用 flyTop flyLeft fadeIn scaleIn 等简单动画类

DEMO

http://u.boy.im/css3keyframes

About

Create CSS3 keyframes animation from javascript

Resources

License

Releases

No releases published

Packages

No packages published