chenglou / react-tween-state

React animation.
Other
1.74k stars 70 forks source link

tween while changing state to render. #35

Closed chirag04 closed 9 years ago

chirag04 commented 9 years ago

I have a popup which needs to come out from bottom. popup text is dynamic and is set via state. This makes the popup height variable.

Wondering what is the right way to set the state as well as animate the popup.

Thanks for the amazing lib @chenglou :+1:

chenglou commented 9 years ago

Thanks! I'm not too sure I see the problem if you're animating in from the bottom. That's just animating y right? Unless you mean coming from the far z axis and have its height change from 0 to the final height?

chirag04 commented 9 years ago

Sorry i was not clear in my post.

Yes, i mean just animating y, but the height is not fixed. Height is determined by the state which gives the component some height. eg: Ccomponent is made of text which is of variable height.

`js

{this.state.text}

container: { position: 'absolute', left: 0, right: 0, bottom: 0, } `

Initially this.state.text is empty and view is hidden.

I do this.setState: {text: 'something variable'}' I also want to tween this view to come from bottom when i set the state. I don't know the height of the component here.

Does that make sense?

chenglou commented 9 years ago

Oh so you don't know the final value of your y because you want to vertically center it?

chirag04 commented 9 years ago

yes. final y value is not know.

Also, is it ok to be like:

this.setState({text: 'something'});
this.tweenState('bottom', {

      easing: tweenState.easingTypes.linear,
      duration: 100,
      endValue: 0
    });
chenglou commented 9 years ago

Yes, the above is ok.

Tween-state only takes care of tweening values you provide, so how to get these values is up to you. This is by design and ensures it works on other platforms. In your case, you should probably reach into the DOM and get the box height after you've placed the text, then check window height and do the centering calculations, then pass that value as the final value to tweenState.

Does this make sense? I know it's a bit dirty, but that's the state of things for text measurement and all. You can definitely build a component on top of this to make it cleaner and declarative.

If that solves your problem, I'll close the issue.

chirag04 commented 9 years ago

yes, it does. Thanks for the help. I think i now know a way to do it.