docs(examples): add react-transition-group example (#395)

* docs(examples): add react-transition-group example

* chore(contributors): update knpwrs' contributions

Author: knpwrs

.all-contributorsrc

@@ -535,7 +535,8 @@
       "avatar_url": "https://avatars0.githubusercontent.com/u/174864?v=4",
       "profile": "https://knpw.rs",
       "contributions": [
-        "ideas"
+        "ideas",
+        "example"
       ]
     },
     {

README.md

@@ -162,7 +162,7 @@ Thanks goes to these people ([emoji key][emojis]):
 | [<img src="https://avatars2.githubusercontent.com/u/4118089?v=3" width="100px;"/><br /><sub><b>FredericH</b></sub>](http://fr.linkedin.com/in/fredericheem)<br />[💡](#example-FredericHeem "Examples") | [<img src="https://avatars3.githubusercontent.com/u/656630?v=3" width="100px;"/><br /><sub><b>Atticus White</b></sub>](https://atticuswhite.com)<br />[📖](/paypal/glamorous/commits?author=ajwhite "Documentation") [🔌](#plugin-ajwhite "Plugin/utility libraries") | [<img src="https://avatars0.githubusercontent.com/u/13483453?v=3" width="100px;"/><br /><sub><b>marzelin</b></sub>](https://github.com/marzelin)<br />[💻](/paypal/glamorous/commits?author=marzelin "Code") | [<img src="https://avatars2.githubusercontent.com/u/4074973?v=3" width="100px;"/><br /><sub><b>iwantmyname</b></sub>](https://iwantmyname.com/)<br />[🚇](#infra-iwantmyname "Infrastructure (Hosting, Build-Tools, etc)") | [<img src="https://avatars1.githubusercontent.com/u/11809142?v=3" width="100px;"/><br /><sub><b>Ethan Godt</b></sub>](http://ethangodt.com)<br /> | [<img src="https://avatars3.githubusercontent.com/u/2175447?v=3" width="100px;"/><br /><sub><b>Zill Ding</b></sub>](https://github.com/zillding)<br />[💻](/paypal/glamorous/commits?author=zillding "Code") | [<img src="https://avatars3.githubusercontent.com/u/411643?v=3" width="100px;"/><br /><sub><b>Dan Bradley</b></sub>](https://github.com/debradley)<br />[💻](/paypal/glamorous/commits?author=debradley "Code") |
 | [<img src="https://avatars3.githubusercontent.com/u/22868432?v=3" width="100px;"/><br /><sub><b>Lufty Wiranda</b></sub>](http://instagram.com/luftywiranda13)<br />[💻](/paypal/glamorous/commits?author=luftywiranda13 "Code") | [<img src="https://avatars3.githubusercontent.com/u/3208863?v=3" width="100px;"/><br /><sub><b>Ansuman Shah</b></sub>](https://github.com/ansumanshah)<br />[💻](/paypal/glamorous/commits?author=ansumanshah "Code") [📖](/paypal/glamorous/commits?author=ansumanshah "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/11598?v=3" width="100px;"/><br /><sub><b>Travis LaDuke</b></sub>](http://-)<br />[💡](#example-laduke "Examples") | [<img src="https://avatars2.githubusercontent.com/u/11290953?v=3" width="100px;"/><br /><sub><b>Aydın Çağrı Dumlu</b></sub>](https://github.com/acgrdumlu)<br />[🐛](/paypal/glamorous/issues?q=author%3Aacgrdumlu "Bug reports") [💻](/paypal/glamorous/commits?author=acgrdumlu "Code") | [<img src="https://avatars2.githubusercontent.com/u/1383861?v=3" width="100px;"/><br /><sub><b>Maja Wichrowska</b></sub>](https://github.com/majapw)<br />[🐛](/paypal/glamorous/issues?q=author%3Amajapw "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/6845263?v=3" width="100px;"/><br /><sub><b>Tom Liu</b></sub>](https://github.com/gt3240)<br />[📖](/paypal/glamorous/commits?author=gt3240 "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/1863771?v=3" width="100px;"/><br /><sub><b>Siddharth Kshetrapal</b></sub>](https://github.com/siddharthkp)<br />[⚠️](/paypal/glamorous/commits?author=siddharthkp "Tests") [🔧](#tool-siddharthkp "Tools") |
 | [<img src="https://avatars2.githubusercontent.com/u/5257243?v=3" width="100px;"/><br /><sub><b>WillowHQ</b></sub>](https://github.com/WillowHQ)<br />[📖](/paypal/glamorous/commits?author=WillowHQ "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/12202757?v=4" width="100px;"/><br /><sub><b>Mohammad Rajabifard</b></sub>](https://tarino.ir)<br />[🐛](/paypal/glamorous/issues?q=author%3Amorajabi "Bug reports") [📖](/paypal/glamorous/commits?author=morajabi "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/17005317?v=3" width="100px;"/><br /><sub><b>Omar Albacha</b></sub>](https://github.com/Oalbacha)<br />[💻](/paypal/glamorous/commits?author=Oalbacha "Code") [📖](/paypal/glamorous/commits?author=Oalbacha "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/28659384?v=3" width="100px;"/><br /><sub><b>tdeschryver</b></sub>](https://github.com/tdeschryver)<br />[💻](/paypal/glamorous/commits?author=tdeschryver "Code") [⚠️](/paypal/glamorous/commits?author=tdeschryver "Tests") | [<img src="https://avatars0.githubusercontent.com/u/4955191?v=4" width="100px;"/><br /><sub><b>Dylan Mozlowski</b></sub>](https://github.com/DylanMoz)<br />[💻](/paypal/glamorous/commits?author=DylanMoz "Code") | [<img src="https://avatars2.githubusercontent.com/u/3275424?v=4" width="100px;"/><br /><sub><b>andretshurotshka</b></sub>](https://github.com/goodmind)<br />[💻](/paypal/glamorous/commits?author=goodmind "Code") [⚠️](/paypal/glamorous/commits?author=goodmind "Tests") | [<img src="https://avatars3.githubusercontent.com/u/12836237?v=4" width="100px;"/><br /><sub><b>Danila</b></sub>](https://github.com/O4epegb)<br />[⚠️](/paypal/glamorous/commits?author=O4epegb "Tests") |
-| [<img src="https://avatars3.githubusercontent.com/u/12473268?v=4" width="100px;"/><br /><sub><b>Junyoung Clare Jang</b></sub>](http://ailrun.github.io/)<br />[💻](/paypal/glamorous/commits?author=Ailrun "Code") [⚠️](/paypal/glamorous/commits?author=Ailrun "Tests") | [<img src="https://avatars2.githubusercontent.com/u/897575?v=4" width="100px;"/><br /><sub><b>Björn Ricks</b></sub>](https://twitter.com/bjoernricks)<br />[🐛](/paypal/glamorous/issues?q=author%3Abjoernricks "Bug reports") [💻](/paypal/glamorous/commits?author=bjoernricks "Code") [📖](/paypal/glamorous/commits?author=bjoernricks "Documentation") [⚠️](/paypal/glamorous/commits?author=bjoernricks "Tests") | [<img src="https://avatars0.githubusercontent.com/u/4934193?v=4" width="100px;"/><br /><sub><b>Tyler Deitz</b></sub>](http://tylerdeitz.com)<br />[💻](/paypal/glamorous/commits?author=tvler "Code") | [<img src="https://avatars2.githubusercontent.com/u/16104985?v=4" width="100px;"/><br /><sub><b>Shovan Chatterjee</b></sub>](https://twitter.com/shovan_ch)<br />[📖](/paypal/glamorous/commits?author=shovanch "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/6839660?v=4" width="100px;"/><br /><sub><b>johnjessewood</b></sub>](https://github.com/johnjesse)<br />[💻](/paypal/glamorous/commits?author=johnjesse "Code") | [<img src="https://avatars3.githubusercontent.com/u/856386?v=4" width="100px;"/><br /><sub><b>Daniel</b></sub>](https://www.danielberndt.net)<br />[💻](/paypal/glamorous/commits?author=danielberndt "Code") [⚠️](/paypal/glamorous/commits?author=danielberndt "Tests") | [<img src="https://avatars0.githubusercontent.com/u/174864?v=4" width="100px;"/><br /><sub><b>Ken Powers</b></sub>](https://knpw.rs)<br />[🤔](#ideas-knpwrs "Ideas, Planning, & Feedback") |
+| [<img src="https://avatars3.githubusercontent.com/u/12473268?v=4" width="100px;"/><br /><sub><b>Junyoung Clare Jang</b></sub>](http://ailrun.github.io/)<br />[💻](/paypal/glamorous/commits?author=Ailrun "Code") [⚠️](/paypal/glamorous/commits?author=Ailrun "Tests") | [<img src="https://avatars2.githubusercontent.com/u/897575?v=4" width="100px;"/><br /><sub><b>Björn Ricks</b></sub>](https://twitter.com/bjoernricks)<br />[🐛](/paypal/glamorous/issues?q=author%3Abjoernricks "Bug reports") [💻](/paypal/glamorous/commits?author=bjoernricks "Code") [📖](/paypal/glamorous/commits?author=bjoernricks "Documentation") [⚠️](/paypal/glamorous/commits?author=bjoernricks "Tests") | [<img src="https://avatars0.githubusercontent.com/u/4934193?v=4" width="100px;"/><br /><sub><b>Tyler Deitz</b></sub>](http://tylerdeitz.com)<br />[💻](/paypal/glamorous/commits?author=tvler "Code") | [<img src="https://avatars2.githubusercontent.com/u/16104985?v=4" width="100px;"/><br /><sub><b>Shovan Chatterjee</b></sub>](https://twitter.com/shovan_ch)<br />[📖](/paypal/glamorous/commits?author=shovanch "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/6839660?v=4" width="100px;"/><br /><sub><b>johnjessewood</b></sub>](https://github.com/johnjesse)<br />[💻](/paypal/glamorous/commits?author=johnjesse "Code") | [<img src="https://avatars3.githubusercontent.com/u/856386?v=4" width="100px;"/><br /><sub><b>Daniel</b></sub>](https://www.danielberndt.net)<br />[💻](/paypal/glamorous/commits?author=danielberndt "Code") [⚠️](/paypal/glamorous/commits?author=danielberndt "Tests") | [<img src="https://avatars0.githubusercontent.com/u/174864?v=4" width="100px;"/><br /><sub><b>Ken Powers</b></sub>](https://knpw.rs)<br />[🤔](#ideas-knpwrs "Ideas, Planning, & Feedback") [💡](#example-knpwrs "Examples") |
 | [<img src="https://avatars1.githubusercontent.com/u/442932?v=4" width="100px;"/><br /><sub><b>John Grishin</b></sub>](http://johngrish.in)<br />[🐛](/paypal/glamorous/issues?q=author%3Aexah "Bug reports") [💻](/paypal/glamorous/commits?author=exah "Code") [⚠️](/paypal/glamorous/commits?author=exah "Tests") | [<img src="https://avatars3.githubusercontent.com/u/200528?v=4" width="100px;"/><br /><sub><b>Mordy Tikotzky</b></sub>](https://github.com/tikotzky)<br />[🐛](/paypal/glamorous/issues?q=author%3Atikotzky "Bug reports") [💻](/paypal/glamorous/commits?author=tikotzky "Code") | [<img src="https://avatars3.githubusercontent.com/u/1027024?v=4" width="100px;"/><br /><sub><b>Alasdair McLeay</b></sub>](https://github.com/penx)<br />[💡](#example-penx "Examples") | [<img src="https://avatars1.githubusercontent.com/u/4171528?v=4" width="100px;"/><br /><sub><b>Ardamis Yeshak</b></sub>](https://github.com/zabute)<br />[🔧](#tool-zabute "Tools") | [<img src="https://avatars2.githubusercontent.com/u/3729628?v=4" width="100px;"/><br /><sub><b>Matthew Armstrong</b></sub>](https://github.com/raingerber)<br />[⚠️](/paypal/glamorous/commits?author=raingerber "Tests") |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->

examples/README.md

@@ -227,6 +227,85 @@ that uses [`styled-components`](https://github.com/styled-components/styled-comp
 
 Fun stuff!
 
+## React Transition Group
+
+You can create additional selectors to match the class names generated by
+`CSSTransition` from [`react-transition-group`](https://reactcommunity.org/react-transition-group/).
+For example, consider the following `glamorous` component:
+
+```jsx
+const Box = glamorous.div({
+  transition: 'opacity 300ms ease-in-out',
+  opacity: 1,
+  padding: 20,
+  display: 'inline-block',
+  backgroundColor: '#8787d8',
+  '.fade-enter': {
+    opacity: 0,
+  },
+  '.fade-enter-active': {
+    opacity: 1,
+  },
+  '.fade-exit': {
+    opacity: 1,
+  },
+  '.fade-exit-active': {
+    opacity: 0,
+  },
+})
+```
+
+You can use the above component with `CSSTransition` as such:
+
+```jsx
+// Where `show` is a boolean indicating if the component should be visible:
+<CSSTransition in={show} timeout={300} classNames="fade" unmountOnExit>
+  <Box>Foo!</Box>
+</CSSTransition>
+```
+
+When `show` is set to true, the following events happen all automatically:
+
+1.  The component is mounted.
+1.  The `fade-enter` class is applied and the `opacity` is set to `0`.
+1.  The `fade-enter-active` class is applied and the `opacity` transitions to `1`.
+1.  Once the transition is done, both the `fade-enter` and `fade-enter-active` classes are removed.
+
+"Big whoop!" I hear you say, "that's all possible with CSS animations." What
+makes `react-transition-group` special, however, is its support for exit
+animations. When `show` is set to `false`, the following sequence of events is
+put into motion:
+
+1.  The `fade-exit` class is applied to the mounted component. The opacity
+    remains at `1`. Technically, you don't need a selector for this class since
+    it doesn't do anything for us, but it's good practice to be explicit when
+    dealing with `react-transition-group`.
+1.  The `fade-exit-active` class is applied to the mounted component and the
+    `opacity` transitions to `0`.
+1.  Once the transition is done, the component is unmounted.
+
+When using the `TransitionGroup` component for managing a group of items (or
+even just a single item), the `in` and `unmountOnExit` props are set for you
+automatically:
+
+```jsx
+<TransitionGroup>
+  {items.map(item => (
+    <CSSTransition key={item} timeout={300} classNames="fade">
+      <Box>{item}</Box>
+    </CSSTransition>
+  ))}
+</TransitionGroup>
+```
+
+Now when the `items` array changes between renders the `Box` components will
+transition in and out automatically! This feels like very natural React, but
+now we get entrance and exit animations.
+
+For a complete example of using `CSSTransition` on its own, see [this
+codesandbox](https://codesandbox.io/s/n4pqvzxm6m). For a complete example using
+`TransitionGroup`, see [this codesandbox](https://codesandbox.io/s/rm7r6z22xm).
+
 # Third party examples on codesandbox
 
 * [Material Design Component Styles with Glamorous on codesandbox.io](https://codesandbox.io/s/L9or75AEg) : How to design lean and themeable react component with glamorous.