bee-animate



react bee-animate component for tinper-bee

- transitionName
作为定义的动画名称，也是我们定义css动画样式的一部分。

``
//css
.move-enter, .move-appear {
opacity: 0;
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-duration: 2.5s;
animation-fill-mode: both;
animation-play-state: paused;
}

.move-leave {
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-duration: .5s;
animation-fill-mode: both;
animation-play-state: paused;
}

.move-enter.move-enter-active, .move-appear.move-enter-active {
animation-name: moveLeftIn;
animation-play-state: running;
}

.move-leave.move-leave-active {
animation-name: moveRightOut;
animation-play-state: running;
}

@keyframes moveLeftIn {
0% {
transform-origin: 0 0;
transform: translateX(30px);
opacity: 0;
background: #f5f5f5;
}
20% {
transform-origin: 0 0;
transform: translateX(0);
opacity: 1;
}
80%{
background: #eee;
}
100%{
background: transparent;
opacity: 1;
}
}

@keyframes moveRightOut {
0% {
transform-origin: 0 0;
transform: translateX(0);
opacity: 1;
}
100% {
transform-origin: 0 0;
transform: translateX(-30px);
opacity: 0;
}
}

//js

return (

)

`

- animation

Animate组件默认使用css3动画，当css3动画不兼容时，调用用户传入的animation对象来操作元素或是产生动画。
`
let animation = {
/**
* @param node 当前dom元素
* @param callback 相应的回掉函数
*/
enter: function(node, callback){
//一些操作
return {
stop:function(){

$(node).stop(true);
}
};
},
appear: function(node, callback){
//一些操作
return {
stop:function(){

$(node).stop(true);
}
};
},
leave: function(node, callback){
//一些操作
return {
stop:function(){

$(node).stop(true);
}
};
}
}

return (

)

`

API

动画组件存在三个状态enter、appear、leave

|参数|说明|类型|默认值|
|:--|:---:|:--:|---:|
|component|动画最外层元素|react组件或字符串|span|
|animation|当不支持css3动画时，调用animation| 对象|{}|
|transitionName|动画名称| 对象或字符串||
|transitionEnter|是否支持进入状态| 布尔值|true|
|transitionLeave|是否支持离开状态| 布尔值|true|
|transitionAppear|是否支持停留状态| 布尔值|false|
|exclusive|多个子元素是否独立动画| 布尔值||
|onEnd|结束时的回调函数| 函数||
|onEnter|开始时的回调函数| 函数||
|onLeave|离开时的回调函数| 函数||
|onAppear|停留时的回调函数| 函数||
|showProp|通过制定props设置子元素是否显示| 字符串||



#### 开发调试

`sh
$ git clone https://github.com/tinper-bee/bee-animate
$ cd bee-animate
$ npm install
$ npm run dev
``