Add support for appear and appear-active classes
alexpien committed
Jun 15, 2015 at 12:05 UTC
f1e524b0b16b4645ae9e9d8bdfaee155f6d9ac66
2 files changed
+11
-4
docs/docs/10.1-animation.md
+6
-2
@@ -85,6 +85,7 @@ You'll notice that when you try to remove an item `ReactCSSTransitionGroup` keep
85
```
86
87
### Custom Classes ###
88
+
89
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:
90
91
```javascript
@@ -94,7 +95,9 @@ It is also possible to use custom class names for each of the steps in your tran
95
enter: 'enter',
96
enterActive: 'enterActive',
97
leave: 'leave',
97
- leaveActive: 'leaveActive'
98
+ leaveActive: 'leaveActive',
99
+ appear: 'appear',
100
+ appearActive: 'appearActive'
101
}>
102
{item}
103
</ReactCSSTransitionGroup>
@@ -102,7 +105,8 @@ It is also possible to use custom class names for each of the steps in your tran
105
<ReactCSSTransitionGroup
106
transitionName={
107
enter: 'enter',
105
- leave: 'leave'
108
+ leave: 'leave',
109
+ appear: 'appear'
110
}>
111
{item2}
112
</ReactCSSTransitionGroup>
src/addons/transitions/ReactCSSTransitionGroup.js
+5
-2
@@ -31,13 +31,16 @@ var ReactCSSTransitionGroup = React.createClass({
31
React.PropTypes.string,
32
React.PropTypes.shape({
33
enter: React.PropTypes.string,
34
- leave: React.PropTypes.string
34
+ leave: React.PropTypes.string,
35
+ active: React.PropTypes.string
36
}),
37
React.PropTypes.shape({
38
enter: React.PropTypes.string,
39
enterActive: React.PropTypes.string,
40
leave: React.PropTypes.string,
40
- leaveActive: React.PropTypes.string
41
+ leaveActive: React.PropTypes.string,
42
+ appear: React.PropTypes.string,
43
+ appearActive: React.PropTypes.string
44
})
45
]).isRequired,
46
transitionAppear: React.PropTypes.bool,