Geek Answers Handbook

Reaction: Page Switch Animation

I was wondering if anyone could give an idea on how to achieve an animated component / page switcher using React.js.

What I would like to achieve is a transition to a component / page, as on http://www.semplicelabs.com/ - a headline that translates opacity and margin-top and content that translates opacity.

When a new component / page is displayed, the currently displayed component / page should go to with the new component / page. What I still present is a LayoutComponent that displays the page component in a CSSTransitionGroup :

 import React from 'react/addons'; export default class LayoutComponent extends React.Component { constructor(props) { super(props); this.state = { page: '' }; }, setPage(page) { this.setState({ page }); } render() { return ( <React.addons.CSSTransitionGroup transitionName='page'> {this.state.page} </React.addons.CSSTransitionGroup> ); } }

I also have two page components, FirstPage and SecondPage .

 import React from 'react'; export default class FirstPage extends React.Component { render() { return ( <div> <header className='header'> <div className='container'> First Header </div> </header> <div className='content'> <div className='container'> First Content </div> </div> </div> ); } }

The only differences between SecondPage code and FirstPage code are the contents in the div .container and the class name.

What I was trying to do then was add a transition to vacation with a duration of .8s and introduce a transition with a duration and delay of .8s . The main problem that I see is that the new page component is mounted before the transition from the old one ends. This is my current CSS:

 .page-enter { background-color: #f2f2f2; transition: background-color .8s linear .8s; } .page-enter-active { background-color: #f2f1f1; } .page-leave { background-color: #f2f1f1; transition: background-color .8s linear; } .page-leave-active { background-color: #f2f2f2; } .page-enter .header { margin-top: -80px; opacity: 0; transition: opacity .8s ease-in-out .8s; transition: margin-top .8s ease-in-out .8s; } .page-enter-active .header { margin-top: 0; opacity: 1; } .page-leave .header { margin-top: 0; opacity: 1; transition: opacity .8s ease-in-out; transition: margin-top .8s ease-in-out; } .page-leave-active .header { margin-top: -80px; opacity: 0; } .page-enter .content { opacity: 0; transition: opacity .8s ease-in-out .8s; } .page-enter-active .content { opacity: 1; } .page-leave .content { opacity: 1; transition: opacity .8s ease-in-out; } .page-leave-active .content { opacity: 0; }

I know that I could animate the initial installation using transitionAppear={true} , but this does not help with the problem of installing a new component before the old one is ported.

This is a problem that I struggled with for several days, and I cannot find a solution.

Some codes for the game: https://jsfiddle.net/gonsfx/xva2g6oo/

+5
source share
2 answers

I added state to the pages to preserve opacity (for animation) and set it to 1 (initial = 0) when the component completed the installation with a slight delay. So I added two functions for each page.

 componentDidMount() { setTimeout(() => { this.setState({ opacity: 1 }); }, 20); } getStyle() { return { opacity: this.state.opacity }; }

Then I added a constructor to make the starting material ....

 constructor(props) { super(props); this.state = { opacity: 0 }; this.getStyle = this.getStyle.bind(this); this.componentDidMount = this.componentDidMount.bind(this); }

Here is a DEMO.

The components will appear immediately on the page, so I think it is impossible to make an animation with a gradual disappearance (at least I did not find a solution for this).

+1
source

OK After going through many recent as well as outdated documents, I managed to solve this. Here is the solution

Basically, the reaction-router refers only to the animation of the parent container. But this means that with the help of ReactTransitionGroup we could connect to the componentWillLeave method in the output component, where we can force individual children to manipulate. To facilitate the transition appear baby components may also have a ReactCSSTransitionGroup .

Thus, you will not be able to use only CSSTransitionGroup , but a combination of CSSTransitionGroup and TransitionGroup .

Thus, changing the page would automatically revive the children through the hook, and when you CSSTransitionGroup page, CSSTransitionGroup will be used for individual animations.

setTimeout in the solution may seem like a hack, but all I could do now.

0
source

More articles:


All Articles