Hi,
When using the module as a page transition (top route level), it might not work for some pages sometimes.
In another words, depend on the content of the route, the animation might cut depends on the initialisation status of the next page.
I've created a 'hack' to solve:
I use the default definition of the PageTransition:
<PageTransition timeout={ 500 } transitionAction={ history.action }>
But then on the container (Page) itself I do the following:
componentDidMount() { setTimeout(() => { this.setState({ initialized: true }) }, 500) }
This way I force the 'transition-appear-active' to be there even if the PageTransition is wrong.
However, it's not perfect, it results some inconsistency in the animation incase the content takes longer to load (usually on slower mobile devices).
Is there anyway to fix it internally so there won't be 2 logics? Or in another words, can I force the decision on removing the 'transition-appear-active' class?
Hi, When using the module as a page transition (top route level), it might not work for some pages sometimes. In another words, depend on the content of the route, the animation might cut depends on the initialisation status of the next page. I've created a 'hack' to solve: I use the default definition of the PageTransition:
<PageTransition timeout={ 500 } transitionAction={ history.action }>But then on the container (Page) itself I do the following:componentDidMount() { setTimeout(() => { this.setState({ initialized: true }) }, 500) }And on the top level:
<div className={ ``transition-item detail-page ${this.state.initialized ? 'transition-appear-active' : ''}`` }>This way I force the 'transition-appear-active' to be there even if the PageTransition is wrong. However, it's not perfect, it results some inconsistency in the animation incase the content takes longer to load (usually on slower mobile devices).
Is there anyway to fix it internally so there won't be 2 logics? Or in another words, can I force the decision on removing the 'transition-appear-active' class?
Thanks.