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 (
    <Animate transitionName="move" />
)

• 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 (
    <Animate animation={animation} />
)

API

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

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

开发调试

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