utils/animate
v0.0.3
0.0.3
0.0.2
0.0.1
Collaborators
Gravatar for undefined
1
Apache 2.0
PUBLIC
17
9     DEPENDENCIES
BuildFail

An animation wrapper to transition components in & out.

Use utils/animate in your project
npm i @bit/grommet.react-components.utils.animate

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