Skip to content

Commit 79719ab

Browse files
committed
Merge remote-tracking branch 'refs/remotes/origin/master'
2 parents 0a0b80a + 1905e53 commit 79719ab

File tree

5 files changed

+30
-29
lines changed

5 files changed

+30
-29
lines changed
Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
# Examples
22

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

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

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

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

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

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

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

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

19-
* [Disappear Component](https://github.com/nitin42/animate-components/blob/master/examples/disappear.js)
19+
* [Disappear Component](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/Disappear.js)

packages/animate-components/docs/tips.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ Both `Merge` and an animation component support `component` prop. Shorthand righ
2828

2929
### Merge two animations
3030

31-
Merge two animations using `<Merge />` to create one.
31+
Perform multiple animations.
3232

3333
```html
3434
<Merge
@@ -78,4 +78,4 @@ Use prop `as` to render as an element type.
7878
7979
### Delay both component rendering and animations
8080
81-
[Example](https://github.com/nitin42/animate-components/blob/master/examples/delay.js)
81+
[Example](https://github.com/nitin42/animate-components/blob/master/packages/animate-components/examples/delay.js)

packages/animate-components/docs/usage.md

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -25,71 +25,71 @@ It defines seconds or milliseconds an animation takes to complete one cycle.
2525

2626
```javascript
2727

28-
<Entrance duration="2s">
28+
<Entrance duration='2s'>
2929

3030
```
3131
### delay
3232
Specifies a delay for the start of an animation.
3333

3434
```javascript
3535

36-
<Entrance delay="2s">
36+
<Entrance delay='2s'>
3737

3838
```
3939
### timingFunction
4040
Specifies the speed curve of the animation.
4141

4242
```javascript
4343

44-
<Entrance timingFunction="ease-in">
44+
<Entrance timingFunction='ease-in'>
4545

4646
```
4747
### direction
4848
This prop lets an animation run in reverse direction or alternate cycles.
4949

5050
```javascript
5151

52-
<Entrance direction="reverse">
52+
<Entrance direction='reverse'>
5353

5454
```
5555
### iterations
5656
Specifies the number of times an animation should run.
5757

5858
```javascript
5959

60-
<Entrance iterations="2">
60+
<Entrance iterations='2'>
6161

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

6666
```javascript
6767

68-
<Entrance backfaceVisible="visible">
68+
<Entrance backfaceVisible='visible'>
6969

7070
```
7171
### fillMode
7272
Specifies a style for the element when the animation is not playing.
7373

7474
```javascript
7575

76-
<Entrance fillMode="forward">
76+
<Entrance fillMode='forward'>
7777

7878
```
7979
### playState
8080
Specifies whether the animation is running or paused.
8181

8282
```javascript
8383

84-
<Entrance playState="running">
84+
<Entrance playState='running'>
8585

8686
```
8787
### as
8888
An element type to render as using the prop `as`.
8989

9090
```javascript
9191

92-
<Entrance duration="3s" as="h1">
92+
<Entrance duration='3s' as='h1'>
9393
Hello World
9494
</Entrance>
9595
```
@@ -128,14 +128,15 @@ import App from './App';
128128
class Main extends Component {
129129
render () {
130130
return (
131-
<FadeIn className="main" as="div" duration="3s" component={App} />
131+
<FadeIn className='main' as='div' duration='3s' component={App} />
132132
);
133133
}
134134
}
135135
```
136136

137137
## Merge Component
138-
Merge two animations and create a new one.
138+
Perform multiple animations.
139+
139140
```javascript
140141
import { Merge } from 'animate-components';
141142
import { fadeIn, slideUp } from 'animate-keyframes';
@@ -155,15 +156,15 @@ Performs an animation and unmounts after the last-step (@keyframe).
155156
import { Disappear } from 'animate-components';
156157
import { fadeIn } from 'animate-keyframes';
157158

158-
<Disappear name={fadeIn} as="div" duration="3s">
159+
<Disappear name={fadeIn} as='div' duration='3s'>
159160
<h1>Hello World</h1>
160161
</Disappear>
161162
```
162-
> 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.
163+
> 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.
163164
164165

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

168169

169170
## Usage with styled-components

packages/animate-keyframes/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ npm install animate-keyframes
99
```
1010

1111
## Usage
12-
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.
12+
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.
1313

1414
To import any keyframe,
1515

@@ -94,7 +94,7 @@ import { fadeIn } from 'animate-keyframes';
9494
* `vanishout`
9595
* `vanishin`
9696

97-
### Expanse (in space)
97+
### Expanse
9898

9999
* `expanseUp`
100100
* `expanseDown`

tasks.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
has been rendered by React but animations are delayed. This will keep both in sync and will be
99
processed through the timeout prop (type: Number). Though this won't be replacing the delay
1010
attribute of an animation but its an addon for existing library.
11-
- [ ] Code refactor
11+
- [x] Code refactor
1212
- [ ] Component Transitioning
13-
- [ ] Misc Components like perform animation and then disapper (Node removal from DOM instead of hiding using component state which is imperative).
13+
- [x] Misc Components like perform animation and then disapper (Node removal from DOM instead of hiding using component state which is imperative).

0 commit comments

Comments
 (0)