chenglou / chenglou/react-motion

[Help] Can't get list item to animate using TransitionMotion

Open
#410 3 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.