bee-animate
animate ui component for react
Last updated 3 years ago by ahua52 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install bee-animate 
SYNC missed versions from official npm registry.

bee-animate

npm version Build Status devDependency Status

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

动画组件存在三个状态enterappearleave

参数 说明 类型 默认值
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

Current Tags

  • 1.0.0                                ...           latest (3 years ago)

3 Versions

  • 1.0.0                                ...           3 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.2                                ...           4 years ago

Copyright 2014 - 2016 © taobao.org |