Skip to content

TransitionGroup regressions in v0.5.1 #568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ozanmakes opened this issue Nov 19, 2013 · 3 comments
Closed

TransitionGroup regressions in v0.5.1 #568

ozanmakes opened this issue Nov 19, 2013 · 3 comments

Comments

@ozanmakes
Copy link

I've encountered some problems after upgrading to React v.0.5.1 and looks like there are some regressions related to the transitions addon.

Here are some test cases: v0.5.0, v0.5.1

@zpao
Copy link
Member

zpao commented Nov 19, 2013

cc @petehunt

#439 has the commits that went into 0.5.1. Or ea1ab55...6401681 which is easier to look at. I'm 99.99% sure it's 1b835fb you want.

I think what might be happening is that by fixing a bug, we triggered behavior you weren't expecting. If you look at the console and end state in your 0.5.0 example, no end event is triggered (because of a bug on our end) and your node still has classes on it that it shouldn't. But if you remove those classes your transition is triggered again. This happens in your 0.5.1 example.

@zpao
Copy link
Member

zpao commented Nov 19, 2013

Having not used TransitionGroup, I'll admit the docs could be clearer. But using those examples, I think you want the transition to be set in .card-enter. That way when the transform is applied, it happens once, but then card-enter and card-enter-active are presumably removed at the same time, so there is no transition back. If you leave the transition on .card, any changes will result in a transition. See it in action: http://jsfiddle.net/8GAwn/

@ozanmakes
Copy link
Author

@zpao Yeah, turns out I overlooked the fact that the default opacity value is 1 and looking at the documentation I thought .example-enter-active was supposed to stay enabled (of course in this scenario .example-enter class would've been redundant).

Since the card doesn't have a back face in my reduced test case the rotated card looks the same, so your version seems to what I want, but fixing the problem by moving the translation to .card-enter didn't translate well into my application. Anyhow, once I wrapped my head around the timeline it was a piece of cake. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants