In my quest to achieve a smooth vertical scroll effect for content appearing and disappearing from the DOM, I've turned to CSSTransitionGroup (or ReactTransitionGroup). While I'm familiar with CSS animations for such effects, I need to implement this in React when elements enter and leave the DOM. That's why I thought CSSTransitionGroup would be perfect.
Despite successfully animating properties like color and opacity, I'm facing difficulty in animating properties such as height or max-height to smoothly fade out content from top to bottom or vice versa. How can I animate this smooth scrolling effect for item entry and exit from the DOM?
Below is my current code using CSSTransitionGroup:
class App extends React.Component {
state = {
random: true
};
toggleItem = () => {
this.setState({
random: !this.state.random
});
};
render() {
console.log("random", this.state.random);
return (
<div>
<button onClick={this.toggleItem}>toggle item</button>
<br />
<CSSTransition
in={this.state.random}
timeout={400}
classNames="alert"
unmountOnExit
appear
enter={false}
>
<div class="back">
Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf
afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads asdfasdf
asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa
fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads
asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf
asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads
asdfads asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd
asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf
</div>
</CSSTransition>
</div>
);
}
}
export default App;
Here's the current class for entry states:
.alert-enter {
height: 0px;
visibility: hidden;
overflow: hidden;
}
.alert-enter-active {
height: auto;
overflow: auto;
visibility: visible;
transition: all 300ms;
}