		@@ -21,4 +21,23 @@ # Example Usage

		Or, using one of the convenient helper functions:

		```javascript
		import withAnimate from 'styled-animate'

		const Foo = styled.div`
		/* some styles here */
		`

		const AnimatedFoo = fadeInOut(Foo, '500ms linear')

		// then in a render function...
		<AnimatedFoo in={this.state.showFoo} />
		```

		Using the "animate" key will produce a react-transition-group <Transition> component that animates opacity from 0 to 1 on mount and from 1 to 0 on unmount, both animations lasting 500ms (parsed from the "transition" key). You may also use seconds as the unit of measure for the transition timing, like `transition: 2s ease-in`.

		# Test Drive in Codesandbox.io!

		https://codesandbox.io/s/20zqow283n

		# API
		@@ -37,2 +56,7 @@

		## Helper Methods

		TODO
		Right now I have fadeInOut, fadeIn, and fadeOut. Many more to come! And documentation that doesn't suck!

		# Compatible components
		@@ -46,3 +70,3 @@

		Allow passing an array of properties to animate, and allow passing different values for "entering" and "exiting" phases of animation:
		* Allow passing an array of properties to animate, and allow passing different values for "entering" and "exiting" phases of animation:

		@@ -61,1 +85,5 @@ ```javascript
		```

		* Automatically apply the animation to all children of a component

		* Easily compose helper function animations together

styled-animate - npm Package Compare versions

New alerts