Allow ReactCSSTransitionGroup to also take in object containing classNames instead of relying on manipulation of the transitionName property
alexpien committed
Apr 27, 2015 at 18:56 UTC
039110f8bf0b61e6055f384d15f5e462d51c50f4
2 files changed
+15
-3
src/addons/transitions/ReactCSSTransitionGroup.js
+13
-1
@@ -27,7 +27,19 @@ var ReactCSSTransitionGroup = React.createClass({
27
displayName: 'ReactCSSTransitionGroup',
28
29
propTypes: {
30
- transitionName: React.PropTypes.string.isRequired,
30
+ transitionName: React.PropTypes.oneOfType([
31
+ React.PropTypes.string,
32
+ React.PropTypes.shape({
33
+ enter: React.PropTypes.string,
34
+ leave: React.PropTypes.string
35
+ }),
36
+ React.PropTypes.shape({
37
+ enter: React.PropTypes.string,
38
+ enterActive: React.PropTypes.string,
39
+ leave: React.PropTypes.string,
40
+ leaveActive: React.PropTypes.string
41
+ })
42
+ ]).isRequired,
43
transitionAppear: React.PropTypes.bool,
44
transitionEnter: React.PropTypes.bool,
45
transitionLeave: React.PropTypes.bool
src/addons/transitions/ReactCSSTransitionGroupChild.js
+2
-2
@@ -48,8 +48,8 @@ var ReactCSSTransitionGroupChild = React.createClass({
48
49
transition: function(animationType, finishCallback) {
50
var node = React.findDOMNode(this);
51
- var className = this.props.name + '-' + animationType;
52
- var activeClassName = className + '-active';
51
+ var className = this.props.name[animationType] || this.props.name + '-' + animationType;
52
+ var activeClassName = this.props.name[animationType + 'Active'] || className + '-active';
53
var noEventTimeout = null;
54
55
var endListener = function(e) {