react-smooth

WebJar for react-smooth

License	MIT
Categories	React User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	react-smooth
Last Version	1.0.5
Release Date	May 6, 2020
Type	jar
Description	react-smooth WebJar for react-smooth
Project URL	https://www.webjars.org
Source Code Management	https://github.com/recharts/react-smooth

Download react-smooth

Filename	Size
react-smooth-1.0.5.pom
react-smooth-1.0.5.jar	105 KB
react-smooth-1.0.5-sources.jar	22 bytes
react-smooth-1.0.5-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-smooth/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-smooth</artifactId>
    <version>1.0.5</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/react-smooth/
implementation 'org.webjars.npm:react-smooth:1.0.5'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/react-smooth/
implementation ("org.webjars.npm:react-smooth:1.0.5")

Apache Buildr

'org.webjars.npm:react-smooth:jar:1.0.5'

Apache Ivy

<dependency org="org.webjars.npm" name="react-smooth" rev="1.0.5">
  <artifact name="react-smooth" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='react-smooth', version='1.0.5')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "react-smooth" % "1.0.5"

Leiningen

[org.webjars.npm/react-smooth "1.0.5"]

Dependencies

compile (4)

Group / Artifact	Type	Version
org.webjars.npm : lodash	jar	[4.17.4,4.18)
org.webjars.npm : prop-types	jar	[15.6.0,16)
org.webjars.npm : raf	jar	[3.4.0,4)
org.webjars.npm : react-transition-group	jar	[2.5.0,3)

Project Modules

There are no modules declared in this project.

react-smooth

react-smooth is a animation library work on React.

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

recharts

Redefined chart library built with React and D3

Versions

Version
1.0.5 May 6, 2020
1.0.2 Dec 24, 2018
0.3.0 Sep 22, 2017
0.1.20 Mar 5, 2017