diff --git a/js/timeout-transition-group.jsx b/js/timeout-transition-group.jsx index 463de8f..644cbac 100644 --- a/js/timeout-transition-group.jsx +++ b/js/timeout-transition-group.jsx @@ -133,7 +133,10 @@ var TimeoutTransitionGroupChild = React.createClass({ if (!animationSupported()) { endListener(); } else { - if (animationType === "enter") { + if (animationType === "appear") { + this.animationTimeout = setTimeout(endListener, + this.props.appearTimeout); + } else if (animationType === "enter") { this.animationTimeout = setTimeout(endListener, this.props.enterTimeout); } else if (animationType === "leave") { @@ -179,6 +182,14 @@ var TimeoutTransitionGroupChild = React.createClass({ } }, + componentWillAppear: function(done) { + if (this.props.appear) { + this.transition('appear', done); + } else { + done(); + } + }, + componentWillEnter: function(done) { if (this.props.enter) { this.transition('enter', done); @@ -202,15 +213,18 @@ var TimeoutTransitionGroupChild = React.createClass({ var TimeoutTransitionGroup = React.createClass({ propTypes: { + appearTimeout: React.PropTypes.number, enterTimeout: React.PropTypes.number.isRequired, leaveTimeout: React.PropTypes.number.isRequired, transitionName: React.PropTypes.string.isRequired, + transitionAppear: React.PropTypes.bool, transitionEnter: React.PropTypes.bool, transitionLeave: React.PropTypes.bool, }, getDefaultProps: function() { return { + transitionAppear: false, transitionEnter: true, transitionLeave: true }; @@ -219,9 +233,11 @@ var TimeoutTransitionGroup = React.createClass({ _wrapChild: function(child) { return ( {child}