4.0.4 • Published 9 months ago

react-smooth v4.0.4

Weekly downloads
555,945
License
MIT
Repository
github
Last release
9 months ago

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

AnimateGroup

License

MIT

Copyright (c) 2015-2021 Recharts Group

4.0.4

9 months ago

4.0.3

9 months ago

4.0.2

9 months ago

4.0.1

1 year ago

4.0.0

2 years ago

2.0.5

2 years ago

3.0.0

2 years ago

2.0.4

2 years ago

2.0.3

2 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

4 years ago

1.0.6

5 years ago

1.0.5

6 years ago

1.0.4

6 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

8 years ago

0.3.0

8 years ago

0.2.0

8 years ago

0.1.20

9 years ago

0.1.19

9 years ago

0.1.18

9 years ago

0.1.17

9 years ago

0.1.16

9 years ago

0.1.15

9 years ago

0.1.14

9 years ago

0.1.13

9 years ago

0.1.12

9 years ago

0.1.11

9 years ago

0.1.10

9 years ago

0.1.9

9 years ago

0.1.8

9 years ago

0.1.7

9 years ago

0.1.6

9 years ago

0.1.5

9 years ago

0.1.4

9 years ago

0.1.3

9 years ago

0.1.2

9 years ago

0.1.1

9 years ago

0.1.0

9 years ago

0.0.15

9 years ago

0.0.14

9 years ago

0.0.13

9 years ago

0.0.12

9 years ago

0.0.11

10 years ago

0.0.10

10 years ago

0.0.9

10 years ago

0.0.8

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago

0.0.3

10 years ago