An animation wrapper to transition components in & out.

bit import grommet.react-components/utils/animate

An animation wrapper to transition components in & out.

Example

import Animate from 'grommet/components/Animate';

<Box pad={{"between": "medium"}}
  align='center'>
  <Button label='Leave'
    primary={true}
    onClick={...} />
  <Animate enter={{"animation": "fade", "duration": 1000, "delay": 0}}
    keep={true}>
    <Box direction='row'>
      <Box colorIndex='light-2'
        margin='medium'
        pad='large'>
        <Value value={1} />
      </Box>
    </Box>
  </Animate>
</Box>
NameTypeDescription
component(PropTypes.string|PropTypes.func)

Wrapping component. Defaults to <div/>.

enterPropTypes.object

Animation when component is entering. Possible animations:fade|slide-up|slide-down|slide-left|slide-right

keepPropTypes.bool

Whether to keep or remove element from the DOM. Defaults to false.

leavePropTypes.object

Animation when component is leaving. Defaults to enter animation.

onAppearPropTypes.func

Callback for when the animation appears.

onLeavePropTypes.func

Callback for when the animation leaves.

visible(scroll|PropTypes.bool)

Toggle visibility. When set to scroll, the animation will happen when the component scrolls into view. Defaults to false.

Test Summary

renders with the correct default optionsTests didn't run
renders with a component set as a spanTests didn't run
renders correctly with visibility set to trueTests didn't run
renders correctly with keep set to trueTests didn't run