amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-24 20:53:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3761 from alexpien/CustomClassesForReactCSSTransitionGroup

Browse Source 
Custom class names in ReactCSSTransitionGroup
This commit is contained in:
Paul O’Shannessy
2015-07-28 16:59:51 -07:00
parent f88fbf2053 3a1a529626
commit b8fa801f68
1 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
docs/10.1-animation.md
View File

@@ -117,6 +117,35 @@ At the initial mount, all children of the `ReactCSSTransitionGroup` will `appear
>
> The prop `transitionAppear` was added to `ReactCSSTransitionGroup` in version `0.13`. To maintain backwards compatibility, the default value is set to `false`.
### Custom Classes
It is also possible to use custom class names for each of the steps in your transitions. Instead of passing a string into transitionName you can pass an object containing either the `enter` and `leave` class names, or an object containing the `enter`, `enter-active`, `leave-active`, and `leave` class names. If only the enter and leave classes are provided, the enter-active and leave-active classes will be determined by appending '-active' to the end of the class name. Here are two examples using custom classes:
```javascript
...
<ReactCSSTransitionGroup
transitionName={
enter: 'enter',
enterActive: 'enterActive',
leave: 'leave',
leaveActive: 'leaveActive',
appear: 'appear',
appearActive: 'appearActive'
}>
{item}
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup
transitionName={
enter: 'enter',
leave: 'leave',
appear: 'appear'
}>
{item2}
</ReactCSSTransitionGroup>
...
```
### Animation Group Must Be Mounted To Work
In order for it to apply transitions to its children, the `ReactCSSTransitionGroup` must already be mounted in the DOM or the prop `transitionAppear` must be set to `true`. The example below would not work, because the `ReactCSSTransitionGroup` is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the [Getting Started](#getting-started) section above to see the difference.