Update 10.1-animation.md
Custom classes
alexpien committed
Apr 27, 2015 at 19:16 UTC
6e5b0248db895ff7f0b7cf06bc203702bbf3284f
1 file changed
+26
docs/docs/10.1-animation.md
+26
@@ -84,6 +84,32 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
84
}
85
```
86
87
+### Custom Classes ###
88
+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:
89
+
90
+```javascript
91
+ ...
92
+ <ReactCSSTransitionGroup
93
+ transitionName={
94
+ enter: 'enter',
95
+ enterActive: 'enterActive',
96
+ leave: 'leave',
97
+ leaveActive: 'leaveActive'
98
+ }>
99
+ {item}
100
+ </ReactCSSTransitionGroup>
101
+
102
+ <ReactCSSTransitionGroup
103
+ transitionName={
104
+ enter: 'enter',
105
+ leave: 'leave'
106
+ }>
107
+ {item2}
108
+ </ReactCSSTransitionGroup>
109
+ ...
110
+
111
+```
112
+
113
### Animation Group Must Be Mounted To Work
114
115
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.