react-smooth

react animation

  • Owner: tylerchilds/cutestrap
  • Platform:
  • License:: GNU General Public License v3.0
  • Category::
  • Topic:
  • Like:
    0
      Compare:

Github stars Tracking Chart







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-2016 Recharts Group

Main metrics

Overview
Name With Ownertylerchilds/cutestrap
Primary LanguageCSS
Program languageJavaScript (Language Count: 3)
Platform
License:GNU General Public License v3.0
所有者活动
Created At2016-05-14 01:39:55
Pushed At2023-01-04 08:20:22
Last Commit At2020-10-08 22:10:31
Release Count28
Last Release Namev2.0.0-2 (Posted on 2019-09-23 23:51:59)
First Release Namev0.0.0 (Posted on )
用户参与
Stargazers Count1.6k
Watchers Count37
Fork Count77
Commits Count96
Has Issues Enabled
Issues Count37
Issue Open Count6
Pull Requests Count17
Pull Requests Open Count12
Pull Requests Close Count6
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private
JavaScript

recharts

Redefined chart library built with React and D3