Share your code. Components are building blocks, you are the architect.

utils/animate
v0.0.3
0.0.3
0.0.2
0.0.1
An animation wrapper to transition components in & out.
Gravatar for undefined
grommet
Contributors
Gravatar for undefined
1

Please configure Bit as a scoped registry to install components with NPM.Learn more

npm config set '@bit:registry' https://node.bitsrc.io
Use utils/animate in your project
npm i @bit/grommet.react-components.utils.animate
Copied

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