chenglou / chenglou/react-motion
[Help] Can't get list item to animate using TransitionMotion
- Dominant language
- JavaScript
- Stars
- 21.9k
- Forks
- 1.1k
- PR merge metrics
- No merged PRs in 30d
Description
I am not quite familiar with this library yet so apologies if I've missed something obvious. I've been desperately trying to get this to work for some time now without luck.
I need to animate list items on enter and leave in Staggered manner. I've got a `Container` component which renders `Item` children. The `Container` reads from state (I'm using `redux` if that helps). The item data is stored in state. I update the state in `componentWillReceiveProps`. Now, I want to animate the list items when state has changed.
From the README, I figured TransitionMotion would be the best fit as it pertains to mounting an unmounting (The `Container` is being mounted once).
```
getStyles() {
return this.state.items.map(item => ({
key: item.id, style: {opacity: spring(1)}
}))
}
render() {
{
interpolatedStyles => {
return
{
interpolatedStyles.map(config =>
Item
)
}
}
}
}
```
I guess the issue is, I'm updating the state while the `TransitionMotion` is specifically for mounting/unmounting. If so, how do I achieve this? I've tried setting the `getDefaultStyles` and `willEnter` without any difference
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.