search

eiriklv / react-masonry-component

A React.js component for using @desandro's Masonry
MIT License
1.44k stars 145 forks source link

animations stutter #109

Closed CharmedSatyr closed 6 years ago

CharmedSatyr commented 6 years ago

When Masonry transitionDuration option is > 0, children adjust to their new layouts twice -- once at the desired speed, and again very quickly after they've reached their new location, creating a stuttering effect.

This appears to be the result of componentDidMount being called once when the animation begins, and then immediately again or multiple times once children have reached their optimal positions.

I have checked shouldComponentUpdate methods for my components and don't think they're the problem.

CharmedSatyr commented 6 years ago

I have determined that my bug was not directly due to this package. Rather, default semantic-ui-css styling for Card elements was providing a conflict.

My problem goes away when I remove the subtle transition properties from .ui.cards > .card, .ui.card styling from semantic.min.css.