Enter and exit animations not working with makeResponsive.

[DariuszMusielak]

The description is here: http://stackoverflow.com/questions/41926765/react-stone-cutter-component-enter-and-exit-animations.

I have the same issue for CSSGrid.

[dantrain]

Could you provide a little more context around the ProdGridApp component please? I see you are calling Object.keys(this.state.filterResults), so this.state.filterResults is an object? What are the values?

Stonecutter should use the key property to differentiate between entering and exiting items, in fact CSSGrid uses ReactTransitionGroup under the hood.

You mention it's not working with makeResponsive, does it work without that? Hopefully we can find the issue.

[DariuszMusielak]

Ok, I found above issue on stackoverflow without any answer - at the beginning it seems to be similar to my problem.

In my case, enter and exit animations work correctly without makeResponsive. With makeResponsive sadly animations are not working.

Code:

  renderGrid = (groups) => {
    const { quartInOut } = easings;
    const { enter, entered, exit } = enterExitStyle.fromLeftToRight;

    const Grid = makeResponsive(measureItems(CSSGrid), {
      maxWidth: 1920,
      minPadding: 100
    });

    return (
      <Grid
        component="ul"
        columns={3}
        columnWidth={374}
        gutterWidth={5}
        gutterHeight={5}
        layout={layout.pinterest}
        duration={800}
        easing={quartInOut}
        enter={enter}
        entered={entered}
        exit={exit}
      >
        {Object.keys(groups).map(roleName => {
          return (
            <li key={roleName} >
              <MembershipList memberships={groups[roleName]} roleName={roleName} />
            </li>
          )
        })}
      </Grid>
    )
  }

    const groups = {};
    const { memberships } = this.props;
    memberships.forEach(membership => {
      groups[membership.user_role] = groups[membership.user_role] || []
      groups[membership.user_role].push(membership)
    });

function mapStateToProps(state, ownProps) {
  const { user_email, f2f_date } = ownProps.match.params
  const activeProjects = state.projects.filter(project => project.visible).map(project => project.name);
  return {
    memberships: state.memberships.filter(membership => activeProjects.includes(membership.project_name)),
    user_email: user_email,
    f2f_date: f2f_date
  };
}

export default connect(mapStateToProps, { loadMemberships: membershipActions.loadMemberships })(MembershipsPage);

[dantrain]

Apologies, I'm having trouble reproducing. Could you try moving this code:

const Grid = makeResponsive(measureItems(CSSGrid), {
  maxWidth: 1920,
  minPadding: 100
});

into a higher scope? This only needs to happen once rather than every time renderGrid is run with new groups.

[MikeTayler]

Hey @dantrain I wrote the stackoverflow question @DariuszMusielak referenced. I'd given up on using stonecutter in my project because the animations weren't working.. I just tested your answer above and it solves my issue. Luckily my project is still in dev so I'm switching back to stone-cutter.

Cheers :)

[dantrain]

Oh wonderful! Sorry for missing this on stackoverflow. I will try and improve the readme to make this clearer.