From 60c22a03d5dea5f45a5feb39dc42c8823cf8fabf Mon Sep 17 00:00:00 2001
From: William Garneau <33030290+Thyix@users.noreply.github.com>
Date: Wed, 21 Nov 2018 11:14:06 -0500
Subject: [PATCH 1/2] Timeout props

We could just use the component's timeout props. Tried it myself and it worked :)
---
 docs/src/pages/utils/transitions/SimpleGrow.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/utils/transitions/SimpleGrow.js b/docs/src/pages/utils/transitions/SimpleGrow.js
index c1cde84522aec5..7ac571a71a3c9b 100644
--- a/docs/src/pages/utils/transitions/SimpleGrow.js
+++ b/docs/src/pages/utils/transitions/SimpleGrow.js
@@ -53,7 +53,7 @@ class SimpleGrow extends React.Component {
           <Grow
             in={checked}
             style={{ transformOrigin: '0 0 0' }}
-            {...(checked ? { timeout: 1000 } : {})}
+            timeout={1000}
           >
             <Paper elevation={4} className={classes.paper}>
               <svg className={classes.svg}>

From bdb45eb4a2a134b12b70ea3d0deac45f2f6c1a46 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Wed, 21 Nov 2018 22:08:17 +0100
Subject: [PATCH 2/2] [Grow] Condense the demo

---
 .../src/pages/utils/transitions/SimpleGrow.js | 25 +++++++++----------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/docs/src/pages/utils/transitions/SimpleGrow.js b/docs/src/pages/utils/transitions/SimpleGrow.js
index 7ac571a71a3c9b..b04372ba9fbe61 100644
--- a/docs/src/pages/utils/transitions/SimpleGrow.js
+++ b/docs/src/pages/utils/transitions/SimpleGrow.js
@@ -39,27 +39,26 @@ class SimpleGrow extends React.Component {
     const { classes } = this.props;
     const { checked } = this.state;
 
+    const polygon = (
+      <Paper elevation={4} className={classes.paper}>
+        <svg className={classes.svg}>
+          <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
+        </svg>
+      </Paper>
+    );
+
     return (
       <div className={classes.root}>
         <Switch checked={checked} onChange={this.handleChange} aria-label="Collapse" />
         <div className={classes.container}>
-          <Grow in={checked}>
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
-          </Grow>
+          <Grow in={checked}>{polygon}</Grow>
+          {/* Conditionally applies the timeout property to change the entry speed. */}
           <Grow
             in={checked}
             style={{ transformOrigin: '0 0 0' }}
-            timeout={1000}
+            {...(checked ? { timeout: 1000 } : {})}
           >
-            <Paper elevation={4} className={classes.paper}>
-              <svg className={classes.svg}>
-                <polygon points="0,100 50,00, 100,100" className={classes.polygon} />
-              </svg>
-            </Paper>
+            {polygon}
           </Grow>
         </div>
       </div>