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.09k stars 258 forks source link

Collapsing margins #57

Open whitegrey opened 8 years ago

whitegrey commented 8 years ago

It seems like flip-move doesn't currently take collapsed margins into account when animating items. This is on 2.4.0-rc2.

pvande commented 8 years ago

Also seeing this (or a related) issue.

image

When triggered, the exit transition causes each section to jump downwards by about 14px, which happens to be the amount of padding that is applied to the top of each of the bolded headings.

joshwcomeau commented 8 years ago

@whitegrey argh, collapsed margins are such a pain. Will add it to the backlog,

@pvande hmm, very strange. Is this on master or 2.4.0-rc2? Can you share all the relevant CSS (I suspect it's less about the individual items and more about some quirk with the parent and grandparent containers)

pvande commented 8 years ago

@joshwcomeau I'm currently running v2.3.0.

Relevant styles:

.timeline {
  /* inline */
  position: relative;

  .date-container {
    height: /* inline */;
    margin: 14px 0;

    .day-of-weeks {
      display: block;
      font-size: 14px;
      font-weight: bold;
      line-height: 16px;
    }
  }
}
joshwcomeau commented 8 years ago

Hey @pvande and @whitegrey,

So I've had a chance to play with this a bit and I believe it is the same issue; margins are collapsed, so getComputedStyle returns a margin value of 0px.

This is problematic because, when I take things out of the document flow and position them absolutely, I subtract any applicable margins. I'm not subtracting the collapsed margin.

I'm going to keep the issue open, but honestly I don't foresee having the time to fix it (it's not a super complex issue, but it's adding complexity to an already-complex bit of code, and the solution may be to rethink that whole calculation process).

In the meantime, avoiding collapsed margins should fix the issue for your projects. This can be done by using padding instead of margin, or using margin-top: 28px instead of margin: 14px 0.