Skip to content

Initial state on mount #13

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
RanzQ opened this issue Jan 21, 2017 · 2 comments
Closed

Initial state on mount #13

RanzQ opened this issue Jan 21, 2017 · 2 comments

Comments

@RanzQ
Copy link

RanzQ commented Jan 21, 2017

In the demo, the boxes start with opacity 0. How did you handle it? I'm having a problem with out-in transition since the incoming component starts with opacity 1.

It seems that the initial state is a common issue with React animations: facebook/react#719

I've set up the animation like this:

    componentWillEnter (callback) {
      const el = findDOMNode(this)
      TweenLite.fromTo(el, options.enterDuration, {
        opacity: 0
      }, {
        opacity: 1,
        delay: options.enterDelay,
        onComplete: callback
      })
    }

And this works but seems like a hack to me. :)

    componentDidMount () {
      const el = findDOMNode(this)
      el.setAttribute('style', 'opacity: 0')
    }

But I guess this is the only way when setting the animation via a HOC.

@cheapsteak
Copy link
Owner

cheapsteak commented Jan 21, 2017

Yup, componentDidMount is indeed where I put it, you can see the code here :)

https://github.com/cheapsteak/react-transition-group-plus/blob/master/src/demo/animates/animates.jsx#L10-L23

@RanzQ
Copy link
Author

RanzQ commented Jan 22, 2017

@cheapsteak Thanks, don't know why I didn't find the demo source. :D

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