threepointone/glamor

an example with ReactCSSTransitionGroup

Closed this issue · 5 comments

skhavari commented

Tempted to use select, but the docs say use it sparingly. Without select its easy to get tripped up.

threepointone commented

I'll remove the warning from the docs :P

  • 👍1
mikehobi commented

@skhavari Could you provide a simple example using ReactCSSTransitionGroup with glamor?

Just not sure where select() would be implemented... on the transition children?

skhavari commented

Yep - check this out https://jsfiddle.net/h38pd3jh/

This example has a pretty bad bug - ReactCSSTransitionGroup will

  1. add '.enter'
  2. remove '.enter' add '.enter.enter-active'

So what happens in this example is that both the enter and enterActive styles get applied, with the enter style getting priority.

Theres a couple of ways to fix this

  1. in .enterActive add !important
  2. use select to write the rules, providing a specific rule for '.enter.enter-active'

Is there a better approach?

threepointone commented

You can 'select' by just nesting objects, if that makes it simpler. I wrote a working version (sans error) https://jsfiddle.net/3kv9fgst/3/

  • 👍1
threepointone commented

closing this out, please reopen if you have further questions.