From 039110f8bf0b61e6055f384d15f5e462d51c50f4 Mon Sep 17 00:00:00 2001 From: alexpien Date: Mon, 27 Apr 2015 18:56:00 -0700 Subject: [PATCH 1/3] Allow ReactCSSTransitionGroup to also take in object containing classNames instead of relying on manipulation of the transitionName property --- src/addons/transitions/ReactCSSTransitionGroup.js | 14 +++++++++++++- .../transitions/ReactCSSTransitionGroupChild.js | 4 ++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/addons/transitions/ReactCSSTransitionGroup.js b/src/addons/transitions/ReactCSSTransitionGroup.js index 0699358433..d67a5de530 100644 --- a/src/addons/transitions/ReactCSSTransitionGroup.js +++ b/src/addons/transitions/ReactCSSTransitionGroup.js @@ -27,7 +27,19 @@ var ReactCSSTransitionGroup = React.createClass({ displayName: 'ReactCSSTransitionGroup', propTypes: { - transitionName: React.PropTypes.string.isRequired, + transitionName: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.shape({ + enter: React.PropTypes.string, + leave: React.PropTypes.string + }), + React.PropTypes.shape({ + enter: React.PropTypes.string, + enterActive: React.PropTypes.string, + leave: React.PropTypes.string, + leaveActive: React.PropTypes.string + }) + ]).isRequired, transitionAppear: React.PropTypes.bool, transitionEnter: React.PropTypes.bool, transitionLeave: React.PropTypes.bool diff --git a/src/addons/transitions/ReactCSSTransitionGroupChild.js b/src/addons/transitions/ReactCSSTransitionGroupChild.js index 179a00029d..dd4e1bf984 100644 --- a/src/addons/transitions/ReactCSSTransitionGroupChild.js +++ b/src/addons/transitions/ReactCSSTransitionGroupChild.js @@ -48,8 +48,8 @@ var ReactCSSTransitionGroupChild = React.createClass({ transition: function(animationType, finishCallback) { var node = React.findDOMNode(this); - var className = this.props.name + '-' + animationType; - var activeClassName = className + '-active'; + var className = this.props.name[animationType] || this.props.name + '-' + animationType; + var activeClassName = this.props.name[animationType + 'Active'] || className + '-active'; var noEventTimeout = null; var endListener = function(e) { From 6e5b0248db895ff7f0b7cf06bc203702bbf3284f Mon Sep 17 00:00:00 2001 From: alexpien Date: Mon, 27 Apr 2015 19:16:24 -0700 Subject: [PATCH 2/3] Update 10.1-animation.md Custom classes --- docs/docs/10.1-animation.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/docs/docs/10.1-animation.md b/docs/docs/10.1-animation.md index 568ce3fc5a..143cf1ba79 100644 --- a/docs/docs/10.1-animation.md +++ b/docs/docs/10.1-animation.md @@ -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 + ... + + {item} + + + + {item2} + + ... + +``` + ### 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. From f1e524b0b16b4645ae9e9d8bdfaee155f6d9ac66 Mon Sep 17 00:00:00 2001 From: alexpien Date: Mon, 15 Jun 2015 12:05:18 -0700 Subject: [PATCH 3/3] Add support for appear and appear-active classes --- docs/docs/10.1-animation.md | 8 ++++++-- src/addons/transitions/ReactCSSTransitionGroup.js | 7 +++++-- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/docs/docs/10.1-animation.md b/docs/docs/10.1-animation.md index 143cf1ba79..0f3de7b8c5 100644 --- a/docs/docs/10.1-animation.md +++ b/docs/docs/10.1-animation.md @@ -85,6 +85,7 @@ 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 @@ -94,7 +95,9 @@ It is also possible to use custom class names for each of the steps in your tran enter: 'enter', enterActive: 'enterActive', leave: 'leave', - leaveActive: 'leaveActive' + leaveActive: 'leaveActive', + appear: 'appear', + appearActive: 'appearActive' }> {item} @@ -102,7 +105,8 @@ It is also possible to use custom class names for each of the steps in your tran {item2} diff --git a/src/addons/transitions/ReactCSSTransitionGroup.js b/src/addons/transitions/ReactCSSTransitionGroup.js index d67a5de530..af228467fc 100644 --- a/src/addons/transitions/ReactCSSTransitionGroup.js +++ b/src/addons/transitions/ReactCSSTransitionGroup.js @@ -31,13 +31,16 @@ var ReactCSSTransitionGroup = React.createClass({ React.PropTypes.string, React.PropTypes.shape({ enter: React.PropTypes.string, - leave: React.PropTypes.string + leave: React.PropTypes.string, + active: React.PropTypes.string }), React.PropTypes.shape({ enter: React.PropTypes.string, enterActive: React.PropTypes.string, leave: React.PropTypes.string, - leaveActive: React.PropTypes.string + leaveActive: React.PropTypes.string, + appear: React.PropTypes.string, + appearActive: React.PropTypes.string }) ]).isRequired, transitionAppear: React.PropTypes.bool,