Reakit: Initial transition of Dialog isn't working

[stramel]

🐛 Bug report

Current behavior

The majority of the time when using the unstable animation API, it doesn't properly trigger initial transitions on Dialog/Sidebar.

Steps to reproduce the bug

https://codesandbox.io/s/reakit-be2y4

Expected behavior

It should transition open

Additional Context

I used the Sidebar migration guide from #350 with @diegohaz's comment for animating it. https://github.com/reakit/reakit/issues/350#issuecomment-493121473

[open-collective-bot[bot]]

Hey @stramel :wave:,

Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.

If you use Reakit at work, you can also ask your company to sponsor us :heart:.

[diegohaz]

Hi @stramel. You should use the .hidden selector. I'm not sure it's documented, but it should be once the animated prop is stable.

const SidebarContainer = styled(Dialog)`
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  overflow: auto;
  z-index: 999;
  outline: 0;
  transition: transform 0.3s ease-in-out;
  transform: translateX(0);
  &.hidden {
    transform: translateX(-100%);
  }
`;

There's also this CodeSandbox that might be useful: https://codesandbox.io/s/reakit-animated-mm5u8

[stramel]

Ah, much better! Thanks @diegohaz! Looking forward to documented & stable animation!

[stramel]

@diegohaz Is there anyways to target the entering vs exiting transitions? I was hoping to apply a different transition for enter vs exit.

[diegohaz]

I forked your sandbox and created an example with different transitions for entering and exiting states: https://codesandbox.io/s/reakit-enterleave-animation-ys3z3

But there are probably other ways to do that.

[stramel]

Perfect! Thank you again!