CSSAnimation: 本动画库是基于jQuery，将 CSS:"transition" 过渡动画属性进行的封装

版本 v 0.0.27

项目网站: http://hklmtt.iok.la:81/ca/

食用方法:
$("#BOX").ca({x:100 , height:"10rem"} , complete , steping);

链式调用:
$("#BOX").ca({x:100 , height:"10rem"})
         .ca({rotate:180 , y:100 , background:"#10e410"})
         .ca({skew:[50, 20], color:"#f00"})
         .ca({skew:0 , scale:[2,2] , time:1000})
         .ca({y:30 , scale:1 , rotate:0   , color:"#fff"})
         .ca({height:"7rem" , rotate:0 })
         .ca({y:0 , background:"#E76E21"})
         .ca({scale:1 , x:0 , count:2 , reanim:true});

基础方法

方法	描述
$.ca(ops:JSON, complete:Function, steping:Function);	执行动画
$.caPlay();	恢复暂停的动画由于某些原因rotate旋转时恢复暂停在旋转角度小于180°时会反向旋转,不建议使用
$.caPause();	暂停动画
$.caStop();	立即终止当前动画为完成状态,同时清空队列
$.caClear();	清空当前动画队列 (所有对同一对象执行的动画都会进入队列)
$.caDelay(delay:Number, callback:Function);	延时播放队列

回调函数

名称	类型	描述
complete	Function	动画完成回调函数 - $.ca(ops:JSON, complete:Function, steping:Function);
steping	Function	动画过程回调函数 - $.ca(ops:JSON, complete:Function, steping:Function);

ops:JSON - 基础属性

名称	类型	默认值	描述
time	Number	400 (ms/毫秒)	动画执行时间
delay	Number	0 (ms/毫秒)	动画延迟执行
count	Number	0	播放循环次数
reanim	Boolean	false	循环时是否反向播放动画
ease	String	"ease"	贝赛尔曲线或自定义: "cubic-bezier()"
hide	Boolean	false	动画完成后是否隐藏对象(display:none)

ops:JSON - transform属性

名称	类型	单位	描述
translate: [x,y]	Array	px	以 X,Y 轴移动
translate3d: [x,y,z]	Array	px	以 X,Y,Z 轴移动
translateX , x	Number,String,Array	px	以 X 轴移动
translateY , y	Number,String,Array	px	以 Y 轴移动
translateZ , z	Number,String,Array	px	以 Z 轴移动
scale: [x,y]	Number,String,Array		以 2D 缩放 (当参数只有一个值时则 x = y)
scale3d: [x,y,z]	Array		以 3D 缩放
scaleX	Number,String		以 X 轴缩放
scaleY	Number,String		以 Y 轴缩放
scaleZ	Number,String		以 Z 轴缩放
rotate	Number,String	deg	以 2D 旋转
rotate3d: [x,y,z,deg]	Array	deg	以 3D 旋转 IE中rotate3d(0,1,0,90°>deg<270°)旋转错误,请使用rotateY属性
rotateX	Number,String	deg	以 X 轴的3D旋转 ( 同rotate3d(1,0,0,deg) )
rotateY	Number,String	deg	以 Y 轴的3D旋转 ( 同rotate3d(0,1,0,deg) )
rotateZ	Number,String	deg	以Z轴的3D旋转 ( 同rotate3d(0,0,1,deg) )
skew: [x,y]	Number,String,Array	deg	以 X,Y 轴的 2D 倾斜转换 ( 当参数只有一个值时则 x = y )
skewX	Number,String	deg	以 X 轴的 2D 倾斜转换。
skewY	Number,String	deg	以 Y 轴的 2D 倾斜转换。
perspective	Number,String	px	以 3D 转换元素定义透视视图。

ops:JSON - 其他属性

所有符合CSS:"transition"标准的属性
例如:

width/height
top/left/right
padding/margin
opacity/background
more css ...

预设动画

方法	描述
$.caSlide(show:Boolean, time:Number, callback);	折叠动画,自动切换折叠与展开,参数:show true强制显示;false:强制关闭
$.caFlip(show:Boolean, time:Number, callback);	X轴翻转动画,参数:show true强制显示;false:强制关闭
$.caTurn(show:Boolean, time:Number, callback);	Y轴翻转动画,参数:show true强制显示;false:强制关闭

预设 - 贝赛尔曲线

$.cssEase = {
        'ease'          : 'ease',
        'in'            : 'ease-in',
        'out'           : 'ease-out',
        'in-out'        : 'ease-in-out',
        'linear'        : "cubic-bezier(1,1,1,1)",
        'snap'          : 'cubic-bezier(0,1,.5,1)',
        'easeOutCubic'  : 'cubic-bezier(.215,.61,.355,1)',
        'easeInOutCubic': 'cubic-bezier(.645,.045,.355,1)',
        'easeInCirc'    : 'cubic-bezier(.6,.04,.98,.335)',
        'easeOutCirc'   : 'cubic-bezier(.075,.82,.165,1)',
        'easeInOutCirc' : 'cubic-bezier(.785,.135,.15,.86)',
        'easeInExpo'    : 'cubic-bezier(.95,.05,.795,.035)',
        'easeOutExpo'   : 'cubic-bezier(.19,1,.22,1)',
        'easeInOutExpo' : 'cubic-bezier(1,0,0,1)',
        'easeInQuad'    : 'cubic-bezier(.55,.085,.68,.53)',
        'easeOutQuad'   : 'cubic-bezier(.25,.46,.45,.94)',
        'easeInOutQuad' : 'cubic-bezier(.455,.03,.515,.955)',
        'easeInQuart'   : 'cubic-bezier(.895,.03,.685,.22)',
        'easeOutQuart'  : 'cubic-bezier(.165,.84,.44,1)',
        'easeInOutQuart': 'cubic-bezier(.77,0,.175,1)',
        'easeInQuint'   : 'cubic-bezier(.755,.05,.855,.06)',
        'easeOutQuint'  : 'cubic-bezier(.23,1,.32,1)',
        'easeInOutQuint': 'cubic-bezier(.86,0,.07,1)',
        'easeInSine'    : 'cubic-bezier(.47,0,.745,.715)',
        'easeOutSine'   : 'cubic-bezier(.39,.575,.565,1)',
        'easeInOutSine' : 'cubic-bezier(.445,.05,.55,.95)',
        'easeInBack'    : 'cubic-bezier(.6,-.28,.735,.045)',
        'easeOutBack'   : 'cubic-bezier(.175, .885,.32,1.275)',
        'easeInOutBack' : 'cubic-bezier(.68,-.55,.265,1.55)'
    };

Gitee 极速下载 / CSSAnimation

版本 v 0.0.27

项目网站: http://hklmtt.iok.la:81/ca/

基础方法

回调函数

ops:JSON - 基础属性

ops:JSON - transform属性

ops:JSON - 其他属性

预设动画

预设 - 贝赛尔曲线

技术交流 QQ:312678057

简介

发行版

贡献者

近期动态

Gitee 极速下载 / CSSAnimation .gitee-modal { width: 500px !important; }

版本 v 0.0.27

项目网站: http://hklmtt.iok.la:81/ca/

基础方法

回调函数

ops:JSON - 基础属性

ops:JSON - transform属性

ops:JSON - 其他属性

预设动画

预设 - 贝赛尔曲线

技术交流 QQ:312678057

简介

发行版

贡献者

近期动态

搜索帮助

Gitee 极速下载 / CSSAnimation