Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Slide Up and Down with React Transition Group
.Group {
overflow: hidden;
}
.Group-child {
display: block;
}
.Group-child-enter.Group-child-enter-active {
transition: opacity 300ms ease-in, margin-top 300ms ease-out;
}
.Group-child-exit.Group-child-exit-active {
transition: opacity 300ms ease-out, margin-top 300ms ease-in;
}
.Group-child-enter,
.Group-child-exit.Group-child-exit-active {
opacity: 0;
}
.Group-child-enter.Group-child-enter-active,
.Group-child-exit {
opacity: 1;
}
import React, {Component} from 'react';
import {CSSTransition, TransitionGroup} from 'react-transition-group';
import classNames from 'classnames';
import './Group.css';
const duration = 300;
export default class Group extends Component {
render() {
let marginTop;
const {
children,
className,
...props
} = this.props,
onEnter = node => {
const height = node.parentNode.offsetHeight;
node.style.display = "none";
node.style.marginTop = `${node.parentNode.offsetHeight - height}px`;
node.style.display = "";
},
onEntering = node => {
node.style.marginTop = "";
},
onExit = node => {
const height = node.parentNode.offsetHeight;
node.style.display = "none";
marginTop = `${node.parentNode.offsetHeight - height}px`;
node.style.display = "";
},
onExiting = node => {
node.style.marginTop = marginTop;
};
return <TransitionGroup className={classNames(className, 'Group')} {...props}>
{
React
.Children
.toArray(children)
.map(child => {
return <CSSTransition
className={classNames(child.props.className, 'Group-child')}
classNames="Group-child"
key={child.key}
timeout={duration}
onEnter={onEnter}
onEntering={onEntering}
onExit={onExit}
onExiting={onExiting}>
{child}
</CSSTransition>;
})
}
</TransitionGroup>;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment