Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Commit 23c00e6

Browse files
cvlecvle
committed
Improve docs
1 parent 8fcd595 commit 23c00e6

File tree

8 files changed

+54
-13
lines changed

8 files changed

+54
-13
lines changed

‎docs/media/preview.png‎

33.7 KB
Loading

‎docs/src/app.tsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ import {
2929
componentSnippet,
3030
introSnippet,
3131
groupSnippet,
32+
delaySnippet,
33+
delayObjectSnippet,
3234
} from "./snippets";
3335

3436
import classes from "./app.css";
@@ -69,7 +71,7 @@ const App: StatelessComponent<void> = () => (
6971
<div className={classes.logoContainerFlex}>
7072
<Logo className={classes.logo} /> <h1 className={classes.logoText}>React CSS Transition</h1>
7173
</div>
72-
<p className={classes.logoSubtext}>Take Control of your CSS Transitions</p>
74+
<p className={classes.logoSubtext}>Take Control of Your CSS Transitions</p>
7375
<p className={classes.githubButton}>
7476
<Button href={githubURL}>Github</ Button>
7577
</p>
@@ -178,9 +180,11 @@ const App: StatelessComponent<void> = () => (
178180
<section className={classes.mainSection}>
179181
<h3>Defining Transitions Using Inline Styles</h3>
180182
<p>
181-
Transitions can be defined using inline styles. React CSS Transition contains a helper
182-
called <code>transit</code> to make defining transitions easier. The provided styles must be
183-
already prefixed if you want to support legacy browsers.
183+
Transitions can be defined using inline styles. The provided styles must be already prefixed
184+
if you want to support legacy browsers. Reactt CSS Transition contains the
185+
helper <code>transit(value, duration, timingFunction, delay)</code> which makes defining
186+
transitions easy. Both <code>duration</code> and <code>delay</code> accepts a numeric value
187+
in milliseconds.
184188
</p>
185189
<SyntaxHighlighter language="javascript">
186190
{inlineStyleSnippet}
@@ -239,6 +243,30 @@ const App: StatelessComponent<void> = () => (
239243
</div>
240244
</section>
241245

246+
<section className={classes.mainSection}>
247+
<h3>Additional Transition Delay</h3>
248+
<p>
249+
<em>
250+
* Support is currently limited to inline styles defined using the <code>transit</code> helper.
251+
This limitation will be removed in a coming release.
252+
</em>
253+
</p>
254+
<p>
255+
An additional amount of delay in milliseconds can be added to the transitions using
256+
the <code>transitionDelay</code> property. A numeric value will be applied
257+
to both the entering and leaving transition.
258+
</p>
259+
<SyntaxHighlighter language="javascript">
260+
{delaySnippet}
261+
</SyntaxHighlighter>
262+
<p>
263+
You can also specify a separate delay for each transition.
264+
</p>
265+
<SyntaxHighlighter language="javascript">
266+
{delayObjectSnippet}
267+
</SyntaxHighlighter>
268+
</section>
269+
242270
<section className={classes.mainSection}>
243271
<h3>The Completion Event</h3>
244272
<p>

‎docs/src/index.html‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html prefix="og: http://ogp.me/ns#">
33

44
<head>
5-
<title data-react-helmet="true">wikiwi.io</title>
6-
<meta http-equiv="Content-type" content="text/html; charset=utf-8" data-react-helmet="true" />
7-
<meta name="viewport" content="width=device-width" data-react-helmet="true" />
8-
<meta name="mobile-web-app-capable" content="yes" data-react-helmet="true" />
9-
<meta name="theme-color" content="#136a8a" data-react-helmet="true" />
5+
<title>React CSS Transition · Take Control of your CSS Transitions</title>
6+
<meta property="og:title" content="React CSS Transition" />
7+
<meta property="og:description" content="Take Control of your CSS Transitions" />
8+
<meta property="og:url" content="https://wikiwi.github.io/react-css-transition" />
9+
<meta property="og:image" content="https://wikiwi.github.io/react-css-transition/preview.png" />
10+
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
11+
<meta name="viewport" content="width=device-width" />
12+
<meta name="mobile-web-app-capable" content="yes" />
13+
<meta name="theme-color" content="#136a8a" />
1014
<style>
1115
@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono|Roboto+Slab');
1216
</style>

‎docs/src/snippets/delayObjectSnippet.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
transitionDelay: { enter: 150, leave: 50 },
3+
}

‎docs/src/snippets/delaySnippet.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
transitionDelay: 300,
3+
}

‎docs/src/snippets/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,5 @@ export { default as groupTranistionSnippet } from "./groupTransitionSnippet";
1212
export { default as groupSnippet } from "./groupSnippet";
1313
export { default as componentSnippet } from "./componentSnippet";
1414
export { default as introSnippet } from "./introSnippet";
15+
export { default as delaySnippet } from "./delaySnippet";
16+
export { default as delayObjectSnippet } from "./delayObjectSnippet";

‎docs/src/snippets/introSnippet.txt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import * as React from "react";
22
import { CSSTransition, transit } from "react-css-transition";
33

4-
const MyActivableComponent = (props) => (
4+
const FadeInOutComponent = ({active, ...rest}) => (
55
<CSSTransition
66
defaultStyle={{ opacity: 0 }}
77
enterStyle={{ opacity: transit(1.0, 500, "ease-in-out") }}
88
leaveStyle={{ opacity: transit(0, 500, "ease-in-out") }}
99
activeStyle={{ opacity: 1.0 }}
10-
active={props.active}
10+
active={active}
1111
>
12-
<MyComponent />
12+
<MyComponent {...rest} />
1313
</CSSTransition>
1414
);

‎docs/webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ module.exports = {
7474
plugins: [
7575
new CopyWebpackPlugin([
7676
{ from: "src/index.html" },
77+
{ from: "media/preview.png" },
7778
]),
7879
new webpack.DefinePlugin({
7980
"process.env": {

0 commit comments

Comments
 (0)