When animating an element in React we can use a snippet such as:
<div>
<button onClick={this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
</div>
Along with the plimenting css animations.
I have read the docs (found here: .html)but I am not 100% sure what the two timeout attributes actually do? I would hazard a guess and say they are a fallback if the animation doesn't plete?
Should the values match the css in/out duration values, or should they be greater than the animation values?
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
When animating an element in React we can use a snippet such as:
<div>
<button onClick={this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{items}
</ReactCSSTransitionGroup>
</div>
Along with the plimenting css animations.
I have read the docs (found here: https://facebook.github.io/react/docs/animation.html)but I am not 100% sure what the two timeout attributes actually do? I would hazard a guess and say they are a fallback if the animation doesn't plete?
Should the values match the css in/out duration values, or should they be greater than the animation values?
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
Share
Improve this question
edited Sep 27, 2016 at 19:52
Sam Sedighian
8951 gold badge7 silver badges21 bronze badges
asked Feb 23, 2016 at 6:40
ChrisChris
58.3k33 gold badges157 silver badges196 bronze badges
1 Answer
Reset to default 9They indicate how long the associated CSS transitions take to plete. You should set these values to the same values you use in your CSS classes for the transition attribute.
ReactCSSTransitionGroup then uses this to determine when it should consider the elements added and removed so it can take the correct action. It used to do this by listening for callbacks, however, this turned out to be really unreliable since there were lots of instances where the callbacks were never called. This would cause elements to never be removed after the transition ended, for example.