diff --git a/src/Transition.js b/src/Transition.js
index b7669646..a9133cc2 100644
--- a/src/Transition.js
+++ b/src/Transition.js
@@ -212,7 +212,8 @@ class Transition extends React.Component {
if (timeout != null && typeof timeout !== 'number') {
exit = timeout.exit
enter = timeout.enter
- appear = timeout.appear
+ // TODO: remove fallback for next major
+ appear = timeout.appear !== undefined ? timeout.appear : enter
}
return { exit, enter, appear }
}
@@ -240,7 +241,7 @@ class Transition extends React.Component {
: mounting
const timeouts = this.getTimeouts()
-
+ const enterTimeout = appearing ? timeouts.appear : timeouts.enter
// no enter animation skip right to ENTERED
// if we are mounting and running this it means appear _must_ be set
if (!mounting && !enter) {
@@ -255,8 +256,7 @@ class Transition extends React.Component {
this.safeSetState({ status: ENTERING }, () => {
this.props.onEntering(node, appearing)
- // FIXME: appear timeout?
- this.onTransitionEnd(node, timeouts.enter, () => {
+ this.onTransitionEnd(node, enterTimeout, () => {
this.safeSetState({ status: ENTERED }, () => {
this.props.onEntered(node, appearing)
})
@@ -438,9 +438,12 @@ Transition.propTypes = {
* timeout={{
* enter: 300,
* exit: 500,
+ * appear: 500,
* }}
* ```
*
+ * If the value of appear is not set, then the value from enter is taken.
+ *
* @type {number | { enter?: number, exit?: number }}
*/
timeout: (props, ...args) => {
diff --git a/src/utils/PropTypes.js b/src/utils/PropTypes.js
index ce0fd85d..5e79556d 100644
--- a/src/utils/PropTypes.js
+++ b/src/utils/PropTypes.js
@@ -6,7 +6,8 @@ export const timeoutsShape =
PropTypes.number,
PropTypes.shape({
enter: PropTypes.number,
- exit: PropTypes.number
+ exit: PropTypes.number,
+ appear: PropTypes.number,
}).isRequired
])
: null;
diff --git a/test/Transition-test.js b/test/Transition-test.js
index 6034d86f..380eb147 100644
--- a/test/Transition-test.js
+++ b/test/Transition-test.js
@@ -131,6 +131,53 @@ describe('Transition', () => {
inst.setProps({ in: true })
})
+ describe('appearing timeout', () => {
+ it('should use enter timeout if appear not set', done => {
+ let calledBeforeEntered = false
+ setTimeout(() => {
+ calledBeforeEntered = true
+ }, 10)
+ const wrapper = mount(
+
+
+
+ )
+
+ wrapper.setProps({
+ onEntered() {
+ if (calledBeforeEntered) {
+ done()
+ } else {
+ throw new Error('wrong timeout')
+ }
+ },
+ })
+ })
+
+ it('should use appear timeout if appear is set', done => {
+ const wrapper = mount(
+
+
+
+ )
+
+ let isCausedLate = false
+ setTimeout(() => {
+ isCausedLate = true
+ }, 15)
+
+ wrapper.setProps({
+ onEntered() {
+ if (isCausedLate) {
+ throw new Error('wrong timeout')
+ } else {
+ done()
+ }
+ }
+ })
+ })
+ })
+
describe('entering', () => {
let wrapper