Initial state on mount

[RanzQ]

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: https://github.com/facebook/react/issues/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]

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]

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