bee-animate v1.0.0

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

开发调试

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