react-size-transition
Gently transition the sizes of containers when their contents change.
Install
npm install --save react-size-transition
Usage
import React Component from 'react';import SizeTransition from 'react-size-transition'; // This example uses styled components, but you can use any CSS framework.import styled from 'styled-components'; FadeText = styleddiv` transition: 0.5s; opacity: 1; &.hidden { opacity: 0; }` { return <SizeTransition> <FadeText>thispropsfadeText</FadeText> </SizeTransition> }
How it works
Whenever the SizeTransition component is re-rendered with new content, the old children continue to be rendered, overlapping the new children, for a short while. A hidden
class (the class name can be customized) is added to children to trigger transitions.
A typical lifecycle, showing initial rendering and an update:
First child | Second child | |
---|---|---|
Initial render | Mounted with hidden |
- |
Immediately after | hidden removed |
- |
Content update | hidden added |
Mounted with hidden |
Immediately after | - | hidden removed |
1 second later | Unmounted | - |
Props
- transition: The
transition
CSS property applied on the resizing container. Default:0.5s ease-in-out
. Note that this must not benone
. Old children are removed from the DOM when this transition ends. - hiddenClassName: The class name to add to children that should be hidden.
Future work
Several additional features are required before we hit 1.0:
- Support custom alignment between old and new content (during the transition). Currently it is centered both vertically and horizontally.
- Separate the container size transition and the child entry/exit transition into separate components.
License
MIT © aravindet