Skip to content

Commit

Permalink
Merge remote-tracking branch 'refs/remotes/origin/master'
Browse files Browse the repository at this point in the history
  • Loading branch information
nitin42 committed Jun 20, 2017
2 parents 0a0b80a + 1905e53 commit 79719ab
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 29 deletions.
18 changes: 9 additions & 9 deletions packages/animate-components/docs/example.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
# Examples

* [Basic](https://github.com/nitin42/animate-components/blob/master/examples/simple.js)
* [Basic](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/simple.js)

* [DOM Nesting](https://github.com/nitin42/animate-components/blob/master/examples/domNesting.js)
* [DOM Nesting](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/domNesting.js)

* [forceInterpolate prop](https://github.com/nitin42/animate-components/blob/master/examples/forceInterpolate.js)
* [forceInterpolate prop](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/forceInterpolate.js)

* [Merge animations](https://github.com/nitin42/animate-components/blob/master/examples/multistep.js)
* [Merge animations](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/multistep.js)

* [Render as an element type](https://github.com/nitin42/animate-components/blob/master/examples/renderElementType.js)
* [Render as an element type](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/renderElementType.js)

* [HTML attribute support](https://github.com/nitin42/animate-components/blob/master/examples/App.js)
* [HTML attribute support](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/App.js)

* [Render component](https://github.com/nitin42/animate-components/blob/master/examples/componentProp.js)
* [Render component](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/componentProp.js)

* [Delay rendering](https://github.com/nitin42/animate-components/blob/master/examples/delay.js)
* [Delay rendering](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/delay.js)

* [Disappear Component](https://github.com/nitin42/animate-components/blob/master/examples/disappear.js)
* [Disappear Component](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/Disappear.js)
4 changes: 2 additions & 2 deletions packages/animate-components/docs/tips.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ Both `Merge` and an animation component support `component` prop. Shorthand righ

### Merge two animations

Merge two animations using `<Merge />` to create one.
Perform multiple animations.

```html
<Merge
Expand Down Expand Up @@ -78,4 +78,4 @@ Use prop `as` to render as an element type.
### Delay both component rendering and animations
[Example](https://github.com/nitin42/animate-components/blob/master/examples/delay.js)
[Example](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/delay.js)
29 changes: 15 additions & 14 deletions packages/animate-components/docs/usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,71 +25,71 @@ It defines seconds or milliseconds an animation takes to complete one cycle.

```javascript

<Entrance duration="2s">
<Entrance duration='2s'>

```
### delay
Specifies a delay for the start of an animation.

```javascript

<Entrance delay="2s">
<Entrance delay='2s'>

```
### timingFunction
Specifies the speed curve of the animation.

```javascript

<Entrance timingFunction="ease-in">
<Entrance timingFunction='ease-in'>

```
### direction
This prop lets an animation run in reverse direction or alternate cycles.

```javascript

<Entrance direction="reverse">
<Entrance direction='reverse'>

```
### iterations
Specifies the number of times an animation should run.

```javascript

<Entrance iterations="2">
<Entrance iterations='2'>

```
### backfaceVisible
This prop defines whether an element should be visible when not facing the screen or not.

```javascript

<Entrance backfaceVisible="visible">
<Entrance backfaceVisible='visible'>

```
### fillMode
Specifies a style for the element when the animation is not playing.

```javascript

<Entrance fillMode="forward">
<Entrance fillMode='forward'>

```
### playState
Specifies whether the animation is running or paused.

```javascript

<Entrance playState="running">
<Entrance playState='running'>

```
### as
An element type to render as using the prop `as`.

```javascript

<Entrance duration="3s" as="h1">
<Entrance duration='3s' as='h1'>
Hello World
</Entrance>
```
Expand Down Expand Up @@ -128,14 +128,15 @@ import App from './App';
class Main extends Component {
render () {
return (
<FadeIn className="main" as="div" duration="3s" component={App} />
<FadeIn className='main' as='div' duration='3s' component={App} />
);
}
}
```

## Merge Component
Merge two animations and create a new one.
Perform multiple animations.

```javascript
import { Merge } from 'animate-components';
import { fadeIn, slideUp } from 'animate-keyframes';
Expand All @@ -155,15 +156,15 @@ Performs an animation and unmounts after the last-step (@keyframe).
import { Disappear } from 'animate-components';
import { fadeIn } from 'animate-keyframes';

<Disappear name={fadeIn} as="div" duration="3s">
<Disappear name={fadeIn} as='div' duration='3s'>
<h1>Hello World</h1>
</Disappear>
```
> Note - You can also pass all the [html attributes](https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes) supported by React to both the Merge and Disappear component along with the above props. Check [this](https://github.com/nitin42/animate-components/blob/master/examples/App.js) example.
> Note - You can also pass all the [html attributes](https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes) supported by React to both the Merge and Disappear component along with the above props. Check [this](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/App.js) example.

## Delay Component
Delay both the rendering and animations. Detailed info [here](https://github.com/nitin42/animate-components/blob/master/examples/delay.js).
Delay both the rendering and animations. Detailed info [here](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/delay.js).


## Usage with styled-components
Expand Down
4 changes: 2 additions & 2 deletions packages/animate-keyframes/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ npm install animate-keyframes
```

## Usage
Keyframes are required when you will be using [Merge]() and [Disappear Component](). Earlier they were bundled with the same package ([`animate-components`](../animate-components)) so there are few changes when importing them.
Keyframes are required when you use [Merge](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/docs/usage.md#merge-component) and [Disappear](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/docs/usage.md#disappear-component) Component. Earlier they were bundled within the same package ([`animate-components`](../animate-components)) so there are few changes when importing them.

To import any keyframe,

Expand Down Expand Up @@ -94,7 +94,7 @@ import { fadeIn } from 'animate-keyframes';
* `vanishout`
* `vanishin`

### Expanse (in space)
### Expanse

* `expanseUp`
* `expanseDown`
Expand Down
4 changes: 2 additions & 2 deletions tasks.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,6 @@
has been rendered by React but animations are delayed. This will keep both in sync and will be
processed through the timeout prop (type: Number). Though this won't be replacing the delay
attribute of an animation but its an addon for existing library.
- [ ] Code refactor
- [x] Code refactor
- [ ] Component Transitioning
- [ ] Misc Components like perform animation and then disapper (Node removal from DOM instead of hiding using component state which is imperative).
- [x] Misc Components like perform animation and then disapper (Node removal from DOM instead of hiding using component state which is imperative).

0 comments on commit 79719ab

Please sign in to comment.