0.8.2 • Published 6 years ago

react-size-transition v0.8.2

Weekly downloads
2
License
MIT
Repository
github
Last release
6 years ago

react-size-transition

Gently transition the sizes of containers when their contents change.

NPM

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 = styled.div`
  transition: 0.5s;
  opacity: 1;
  &.hidden { opacity: 0; }
`

class Example extends Component {
  render () {
    return (
      <SizeTransition>
        <FadeText>{this.props.fadeText}</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 childSecond child
Initial renderMounted with hidden-
Immediately afterhidden removed-
Content updatehidden addedMounted with hidden
Immediately after-hidden removed
1 second laterUnmounted-

Props

  • transition: The transition CSS property applied on the resizing container. Default: 0.5s ease-in-out. Note that this must not be none. 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

0.8.2

6 years ago

0.8.1

6 years ago

0.8.0

6 years ago

0.6.0

7 years ago

0.5.0

7 years ago