Transitions

Transitions are used to add basic motion to components.

Collapse

Expand vertically from the top of the child element. The collapsedHeight property can be used to set the minimum height when not expanded.

class SimpleCollapse extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      checked: false,
    };
  }

  handleChange() {
    this.setState((state) => ({ checked: !state.checked }));
  }

  render() {
    const { checked } = this.state;

    const polygon = (
      <Paper elevation={4} padding={1} margin={1}>
        <svg style={{ width: '100px', height: '100px' }}>
          <polygon
            points="0,100 50,00, 100,100"
            style={{ fill: '#fff', stroke: '#ccc', strokeWidth: 1 }}
          />
        </svg>
      </Paper>
    );

    return (
      <div style={{ height: '180px' }}>
        <FormControlLabel
          control={<Switch checked={checked} onChange={this.handleChange} />}
          label="Toggle Collapse Transition"
        />
        <div style={{ display: 'flex' }}>
          <Collapse in={checked}>{polygon}</Collapse>
          <Collapse in={checked} collapsedHeight="40px">
            {polygon}
          </Collapse>
        </div>
      </div>
    );
  }
}

class SimpleCollapse extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      checked: false,
    };
  }

  handleChange() {
    this.setState((state) => ({ checked: !state.checked }));
  }

  render() {
    const { checked } = this.state;

    const polygon = (
      <Paper elevation={4} padding={1} margin={1}>
        <svg style={{ width: '100px', height: '100px' }}>
          <polygon
            points="0,100 50,00, 100,100"
            style={{ fill: '#fff', stroke: '#ccc', strokeWidth: 1 }}
          />
        </svg>
      </Paper>
    );

    return (
      <div style={{ height: '180px' }}>
        <FormControlLabel
          control={<Switch checked={checked} onChange={this.handleChange} />}
          label="Toggle Collapse Transition"
        />
        <div style={{ display: 'flex' }}>
          <Collapse in={checked}>{polygon}</Collapse>
          <Collapse in={checked} collapsedHeight="40px">
            {polygon}
          </Collapse>
        </div>
      </div>
    );
  }
}

Fade

Fade in from transparent to opaque.

class SimpleFade extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      checked: false,
    };
  }

  handleChange() {
    this.setState((state) => ({ checked: !state.checked }));
  }

  render() {
    const { checked } = this.state;

    const polygon = (
      <Paper elevation={4} padding={1} margin={1}>
        <svg style={{ width: '100px', height: '100px' }}>
          <polygon
            points="0,100 50,00, 100,100"
            style={{ fill: '#fff', stroke: '#ccc', strokeWidth: 1 }}
          />
        </svg>
      </Paper>
    );

    return (
      <div style={{ height: '180px' }}>
        <FormControlLabel
          control={<Switch checked={checked} onChange={this.handleChange} />}
          label="Toggle Fade Transition"
        />
        <div style={{ display: 'flex' }}>
          <Fade in={checked}>{polygon}</Fade>
        </div>
      </div>
    );
  }
}

class SimpleFade extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      checked: false,
    };
  }

  handleChange() {
    this.setState((state) => ({ checked: !state.checked }));
  }

  render() {
    const { checked } = this.state;

    const polygon = (
      <Paper elevation={4} padding={1} margin={1}>
        <svg style={{ width: '100px', height: '100px' }}>
          <polygon
            points="0,100 50,00, 100,100"
            style={{ fill: '#fff', stroke: '#ccc', strokeWidth: 1 }}
          />
        </svg>
      </Paper>
    );

    return (
      <div style={{ height: '180px' }}>
        <FormControlLabel
          control={<Switch checked={checked} onChange={this.handleChange} />}
          label="Toggle Fade Transition"
        />
        <div style={{ display: 'flex' }}>
          <Fade in={checked}>{polygon}</Fade>
        </div>
      </div>
    );
  }
}

Grow

Expand outwards from the center of the child element, while also fading in from transparent to opaque.

The second example demonstrates how to change the transform-origin, and conditionally applies the timeout property to change the entry speed.

class SimpleGrow extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      checked: false,
    };
  }

  handleChange() {
    this.setState((state) => ({ checked: !state.checked }));
  }

  render() {
    const { checked } = this.state;

    const polygon = (
      <Paper elevation={4} padding={1} margin={1}>
        <svg style={{ width: '100px', height: '100px' }}>
          <polygon
            points="0,100 50,00, 100,100"
            style={{ fill: '#fff', stroke: '#ccc', strokeWidth: 1 }}
          />
        </svg>
      </Paper>
    );

    return (
      <div style={{ height: '180px' }}>
        <FormControlLabel
          control={<Switch checked={checked} onChange={this.handleChange} />}
          label="Toggle Grow Transition"
        />
        <div style={{ display: 'flex' }}>
          <Grow in={checked}>{polygon}</Grow>
          <Grow
            in={checked}
            style={{ transformOrigin: '0 0 0' }}
            {...(checked ? { timeout: 1000 } : {})}
          >
            {polygon}
          </Grow>
        </div>
      </div>
    );
  }
}

class SimpleGrow extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      checked: false,
    };
  }

  handleChange() {
    this.setState((state) => ({ checked: !state.checked }));
  }

  render() {
    const { checked } = this.state;

    const polygon = (
      <Paper elevation={4} padding={1} margin={1}>
        <svg style={{ width: '100px', height: '100px' }}>
          <polygon
            points="0,100 50,00, 100,100"
            style={{ fill: '#fff', stroke: '#ccc', strokeWidth: 1 }}
          />
        </svg>
      </Paper>
    );

    return (
      <div style={{ height: '180px' }}>
        <FormControlLabel
          control={<Switch checked={checked} onChange={this.handleChange} />}
          label="Toggle Grow Transition"
        />
        <div style={{ display: 'flex' }}>
          <Grow in={checked}>{polygon}</Grow>
          <Grow
            in={checked}
            style={{ transformOrigin: '0 0 0' }}
            {...(checked ? { timeout: 1000 } : {})}
          >
            {polygon}
          </Grow>
        </div>
      </div>
    );
  }
}

Slide

Slide in from the edge of the screen. The direction property controls which edge of the screen the transition starts from.

The Transition component's mountOnEnter property prevents the child component from being mounted until in is true. This prevents the relatively positioned component from scrolling into view from it's off-screen position. Similarly the unmountOnExit property removes the component from the DOM after it has been transitioned off screen.

class SimpleSlide extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      checked: false,
    };
  }

  handleChange() {
    this.setState((state) => ({ checked: !state.checked }));
  }

  render() {
    const { checked } = this.state;

    const polygon = (
      <Paper elevation={4} padding={1} margin={1}>
        <svg style={{ width: '100px', height: '100px' }}>
          <polygon
            points="0,100 50,00, 100,100"
            style={{ fill: '#fff', stroke: '#ccc', strokeWidth: 1 }}
          />
        </svg>
      </Paper>
    );

    return (
      <div style={{ height: '180px' }}>
        <FormControlLabel
          control={<Switch checked={checked} onChange={this.handleChange} />}
          label="Toggle Slide Transition"
        />
        <div style={{ display: 'flex' }}>
          <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
            {polygon}
          </Slide>
        </div>
      </div>
    );
  }
}

class SimpleSlide extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      checked: false,
    };
  }

  handleChange() {
    this.setState((state) => ({ checked: !state.checked }));
  }

  render() {
    const { checked } = this.state;

    const polygon = (
      <Paper elevation={4} padding={1} margin={1}>
        <svg style={{ width: '100px', height: '100px' }}>
          <polygon
            points="0,100 50,00, 100,100"
            style={{ fill: '#fff', stroke: '#ccc', strokeWidth: 1 }}
          />
        </svg>
      </Paper>
    );

    return (
      <div style={{ height: '180px' }}>
        <FormControlLabel
          control={<Switch checked={checked} onChange={this.handleChange} />}
          label="Toggle Slide Transition"
        />
        <div style={{ display: 'flex' }}>
          <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
            {polygon}
          </Slide>
        </div>
      </div>
    );
  }
}

Zoom

Expand outwards from the center of the child element.

This example also demonstrates how to delay the enter transition.

class SimpleZoom extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      checked: false,
    };
  }

  handleChange() {
    this.setState((state) => ({ checked: !state.checked }));
  }

  render() {
    const { checked } = this.state;

    const polygon = (
      <Paper elevation={4} padding={1} margin={1}>
        <svg style={{ width: '100px', height: '100px' }}>
          <polygon
            points="0,100 50,00, 100,100"
            style={{ fill: '#fff', stroke: '#ccc', strokeWidth: 1 }}
          />
        </svg>
      </Paper>
    );
    return (
      <div style={{ height: '180px' }}>
        <FormControlLabel
          control={<Switch checked={checked} onChange={this.handleChange} />}
          label="Toggle Zoom Transition"
        />
        <div style={{ display: 'flex' }}>
          <Zoom in={checked}>{polygon}</Zoom>
          <Zoom in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}>
            {polygon}
          </Zoom>
        </div>
      </div>
    );
  }
}

class SimpleZoom extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);

    this.state = {
      checked: false,
    };
  }

  handleChange() {
    this.setState((state) => ({ checked: !state.checked }));
  }

  render() {
    const { checked } = this.state;

    const polygon = (
      <Paper elevation={4} padding={1} margin={1}>
        <svg style={{ width: '100px', height: '100px' }}>
          <polygon
            points="0,100 50,00, 100,100"
            style={{ fill: '#fff', stroke: '#ccc', strokeWidth: 1 }}
          />
        </svg>
      </Paper>
    );
    return (
      <div style={{ height: '180px' }}>
        <FormControlLabel
          control={<Switch checked={checked} onChange={this.handleChange} />}
          label="Toggle Zoom Transition"
        />
        <div style={{ display: 'flex' }}>
          <Zoom in={checked}>{polygon}</Zoom>
          <Zoom in={checked} style={{ transitionDelay: checked ? '500ms' : '0ms' }}>
            {polygon}
          </Zoom>
        </div>
      </div>
    );
  }
}

SSR

To better support server rendering, Unifi provides a style property to the children of some transition components (Fade, Grow, Zoom, Slide). The style property must be applied to the DOM for the animation to work as expected.

// The `props` object contains a `style` property.
// You need to provide it to the `div` element as shown here.

function MyComponent(props) {
  return (
    <div {...props}>
      Fade
    </div>
  );
}

export default Main() {
  return (
    <Fade>
      <MyComponent />
    </Fade>
  );
}

// The `props` object contains a `style` property.
// You need to provide it to the `div` element as shown here.

function MyComponent(props) {
  return (
    <div {...props}>
      Fade
    </div>
  );
}

export default Main() {
  return (
    <Fade>
      <MyComponent />
    </Fade>
  );
}

Transitions

Collapse

Fade

Grow

Slide

Zoom

SSR

Properties

<Collapse />

<Fade />

<Grow />

<Slide />

<Zoom />