Skip to content

Instantly share code, notes, and snippets.

@WebMaestroFr
Last active January 16, 2022 08:22
Show Gist options
  • Save WebMaestroFr/0867a67330a9b0b8383312c4dc36ab37 to your computer and use it in GitHub Desktop.
Save WebMaestroFr/0867a67330a9b0b8383312c4dc36ab37 to your computer and use it in GitHub Desktop.
Slide Up and Down with React Transition Group
.Group-item,
.Group-item.ui,
.Group-item.ui:first-child {
display: block;
margin-top: 1em;
}
.Group-item-enter.Group-item-enter-active {
transition: opacity 300ms ease-in, margin 300ms ease-out;
}
.Group-item-exit.Group-item-exit-active {
transition: opacity 300ms ease-out, margin 300ms ease-in;
}
.Group-item-enter,
.Group-item-exit.Group-item-exit-active {
opacity: 0;
}
.Group-item-enter.Group-item-enter-active,
.Group-item-exit {
opacity: 1;
}
import React, {Component} from 'react';
import classNames from 'classnames';
import {CSSTransition, TransitionGroup} from 'react-transition-group';
import './Group.css';
const duration = 300,
onEnter = node => {
node.style.marginTop = `-${node.offsetHeight}px`;
node.style.marginBottom = `0px`;
},
onEntering = node => {
node.style.marginTop = "";
node.style.marginBottom = "";
},
onExit = node => {
node.style.marginTop = "";
node.style.marginBottom = "";
},
onExiting = node => {
node.style.marginTop = `-${node.offsetHeight}px`;
node.style.marginBottom = `0px`;
};
export default class Group extends Component {
state = {
items: []
};
setItems = children => this.setState({
items: React
.Children
.toArray(children)
});
componentDidMount() {
const {children} = this.props;
this.setItems(children);
}
componentWillReceiveProps({children}) {
this.setItems(children);
}
render() {
const {
className,
...props
} = this.props, {items} = this.state;
return <TransitionGroup className={classNames(className, 'Group')} {...props}>
{
items.map(
item => <CSSTransition
className={classNames(item.props.className, 'Group-item')}
classNames="Group-item"
key={item.key}
timeout={duration}
onEnter={onEnter}
onEntering={onEntering}
onExit={onExit}
onExiting={onExiting}>
{item}
</CSSTransition>
)
}
</TransitionGroup>;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment