mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Update 10.1-animation.md
Custom classes
This commit is contained in:
@@ -84,6 +84,32 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
|
||||
}
|
||||
```
|
||||
|
||||
### 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'
|
||||
}>
|
||||
{item}
|
||||
</ReactCSSTransitionGroup>
|
||||
|
||||
<ReactCSSTransitionGroup
|
||||
transitionName={
|
||||
enter: 'enter',
|
||||
leave: 'leave'
|
||||
}>
|
||||
{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. 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.
|
||||
|
||||
Reference in New Issue
Block a user