Browse Source

Add support for appear and appear-active classes

main
alexpien 10 years ago
parent
commit
3a1a529626
  1. 8
      docs/10.1-animation.md

8
docs/10.1-animation.md

@ -85,6 +85,7 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
``` ```
### Custom Classes ### ### 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: 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 ```javascript
@ -94,7 +95,9 @@ It is also possible to use custom class names for each of the steps in your tran
enter: 'enter', enter: 'enter',
enterActive: 'enterActive', enterActive: 'enterActive',
leave: 'leave', leave: 'leave',
leaveActive: 'leaveActive' leaveActive: 'leaveActive',
appear: 'appear',
appearActive: 'appearActive'
}> }>
{item} {item}
</ReactCSSTransitionGroup> </ReactCSSTransitionGroup>
@ -102,7 +105,8 @@ It is also possible to use custom class names for each of the steps in your tran
<ReactCSSTransitionGroup <ReactCSSTransitionGroup
transitionName={ transitionName={
enter: 'enter', enter: 'enter',
leave: 'leave' leave: 'leave',
appear: 'appear'
}> }>
{item2} {item2}
</ReactCSSTransitionGroup> </ReactCSSTransitionGroup>

Loading…
Cancel
Save