react-smooth

    2.0.0 • Public • Published

    react-smooth

    react-smooth is a animation library work on React.

    npm version build status npm downloads Gitter

    install

    npm install --save react-smooth
    

    Usage

    simple animation

    <Animate to="0" from="1" attributeName="opacity">
      <div />
    </Animate>

    steps animation

    const steps = [{
      style: {
        opacity: 0,
      },
      duration: 400,
    }, {
      style: {
        opacity: 1,
        transform: 'translate(0, 0)',
      },
      duration: 1000,
    }, {
      style: {
        transform: 'translate(100px, 100px)',
      },
      duration: 1200,
    }];
    
    <Animate steps={steps}>
      <div />
    </Animate>

    children can be a function

    <Animate from={{ opacity: 0 }}
      to={{ opacity: 1 }}
      easing="ease-in"
      >
      {
        ({ opacity }) => <div style={{ opacity }}></div>
      }
    </Animate>

    you can configure js timing function

    const easing = configureBezier(0.1, 0.1, 0.5, 0.8);
    const easing = configureSpring({ stiff: 170, damping: 20 });

    group animation

    const appear = {
      from: 0,
      to: 1,
      attributeName: 'opacity',
    };
    
    const leave = {
      steps: [{
        style: {
          transform: 'translateX(0)',
        },
      }, {
        duration: 1000,
        style: {
          transform: 'translateX(300)',
          height: 50,
        },
      }, {
        duration: 2000,
        style: {
          height: 0,
        },
      }]
    }
    
    <AnimateGroup appear={appear} leave={leave}>
      { list }
    </AnimateGroup>
    
    /*
     *  @description: add compatible prefix in style
     *
     *  style = { transform: xxx, ...others };
     *
     *  translatedStyle = {
     *    WebkitTransform: xxx,
     *    MozTransform: xxx,
     *    OTransform: xxx,
     *    msTransform: xxx,
     *    ...others,
     *  };
     */
    
    const translatedStyle = translateStyle(style);
    

    API

    Animate

    name type default description
    from string or object '' set the initial style of the children
    to string or object '' set the final style of the children
    canBegin boolean true whether the animation is start
    begin number 0 animation delay time
    duration number 1000 animation duration
    steps array [] animation keyframes
    onAnimationEnd function () => null called when animation finished
    attributeName string '' style property
    easing string 'ease' the animation timing function, support css timing function temporary
    isActive boolean true whether the animation is active
    children element support only child temporary

    AnimateGroup

    name type default description
    appear object undefined configure element appear animation
    enter object undefined configure element appear animation
    leave object undefined configure element appear animation

    License

    MIT

    Copyright (c) 2015-2021 Recharts Group

    Install

    npm i react-smooth

    DownloadsWeekly Downloads

    378,589

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    266 kB

    Total Files

    33

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar