search

oblador / react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native
MIT License
9.83k stars 701 forks source link

Delay isn't working for transitions #107

Closed anshul-kai closed 7 years ago

anshul-kai commented 7 years ago

The view below is completely ignoring the delay on RN 0.42.0

<Animatable.View transition='opacity' duration={500} delay={5000} style={{opacity}}>
oblador commented 7 years ago

Hi, delay is only supported for the animation prop. Try using the fadeIn/fadeOut animations.

anshul-kai commented 7 years ago

I see. Thank you for the reminder. I remember this being the issue with the onAnimationBegin and onAnimationEnd callbacks as well. Perhaps, adding this to the documentation would avoid future confusion?

Are there any considerations to make these work for non-animation prop animations? My guess would be that there are some potential design barriers preventing this from being implemented. If not, I'm happy to look into providing a PR.

oblador commented 7 years ago

@a-koka Yes, the problem is that transitions are a slightly different beast where the different properties are animated indepently and might theoretically finish at different times.

br4nnigan commented 7 years ago

Then why wouldn't we just say callbacks aren't supported for transitions, rather than delay? I already made a pull request for transition delay

woowalker commented 7 years ago

@a-koka hi, i wonder how to use the props transition, i try to set transition='opacity' ,but i don`t know how it transition to the opacity that i want. can you give me a simple demo, how to use the props transition . Thanks a lot.

anshul-kai commented 7 years ago

Hi @walkerXiong, you may want to create a separate issue or post on StackOverflow for non-bug questions in the future. This helps the authors to stay focused on actual bugs and it avoids cluttering actual issues.

What you're trying to achieve is simple. When the value of opacity below changes, the View will animate those changes for you.

const opacity = this.state.opacity; // Change this using this.setState({opacity: 1})
<Animatable.View transition='opacity' duration={500} delay={5000} style={{opacity: opacity}}>
digitalmaster commented 7 years ago

I also ran into this issue.. very confusing.. Thanks @br4nnigan for fix here: https://github.com/oblador/react-native-animatable/pull/108

oblador commented 7 years ago

Fixed in 1.2.0.