Can't change transition sequence once initialized
See original GitHub issueHi, I’ve noticed that once a Transition.view is initialized, we can’t update transition to new transition style. Here is an Example code to replicate the issue
import React, { Component } from 'react';
import { Transitioning, Transition } from 'react-native-reanimated';
const transitionSlideIn = (
<Transition.Sequence>
<Transition.Out type="slide-left" />
<Transition.Change interpolation="easeInOut" />
<Transition.In type="slide-right" />
</Transition.Sequence>
);
const transitionSlideOut = (
<Transition.Sequence>
<Transition.Out type="slide-right" />
<Transition.Change interpolation="easeInOut" />
<Transition.In type="slide-left" />
</Transition.Sequence>
);
class Example extends Component {
constructor(props) {
super(props);
this.state = {
isSlideIn: true
};
this.ref = React.createRef();
}
componentDidUpdate(prevProps) {
if (this.props.isSlideIn != prevProps.isSlideIn) {
this.setState({ isSlideIn: isSlideIn }, () => { this.ref.current.animateNextTransition(); })
}
}
render() {
return (
<Transitioning.View
transition={this.state.isSlideIn ? transitionSlideIn : transitionSlideOut}
style={{ flex: 1 }}>
{this.props.children}
</Transitioning.View>
)
}
}
export default Example;
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Can't change transition sequence once initialized #328 - GitHub
Hi, I've noticed that once a Transition.view is initialized, we can't update transition to new transition style. Here is an Example code to ......
Read more >CSS transition doesn't animate when immediately changing ...
So the solution is to simply wrap style changes nested RAF calls (tell the browser to animate when it's ready rather than after...
Read more >Modifying and customizing transitions in Premiere Pro
Follow these step-by-step instructions to learn how to modify and customize transitions in the Premiere Pro Effect Controls panel and ...
Read more >Working with Transitions - Mike Bostock
While only one transition can be running simultaneously on the element, multiple transitions can be scheduled. For example, you can schedule ...
Read more >Controlling CSS Animations and Transitions with JavaScript
Transitions in CSS are applied to an element and specify that when a property changes it should do so over gradually over over...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@osdnk Is it possible to make the transition definition dynamic? (for example based on some property saved in the state). This feature would be super useful I think!
We discussed Transitions internally in our team. Considering that v2 makes creating animations easier and Transitions was an experimental API for a long time, we decided to leave Transitions as they are.
We won’t actively fix bugs in them, but we’ll happily merge any PR with fixes. We’re also thinking about rewriting Transitions in v2 sometime in the future.
I’m closing this issue, but if you have further questions, I will be happy to help.