search

joshwcomeau / react-flip-move

Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.
http://joshwcomeau.github.io/react-flip-move/examples
MIT License
4.08k stars 259 forks source link

CSS3 Grid #249

Closed taylorgoolsby closed 4 years ago

taylorgoolsby commented 4 years ago

Hi,

I know this doesn't work with display: grid because of the way it wraps elements, but I was wondering if there are any known alternatives that are similar to react-flip-move, but work with grid?

taylorgoolsby commented 4 years ago

nvm, just found https://www.npmjs.com/package/animate-css-grid

AlexandraKlein commented 3 years ago

You can target the created div with CSS:

  .container-wrapping-filp-move {
    // Targeting div created by react-flip-move
    > div {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(3, 1fr);
    }
  }