Question, page transitions - best approach ?

[saniko]

Hi,

I'm trying to add some page transition animation, I'm using velocity-react. I have tried HOC for my pages as well as adding transition straight on the Route itself. The transition works in both cases, but I'm getting issues with other Components events and state.

What is the best approach for adding simple fadeIn/Out page transitions?

Thanks

[oyeanuj]

@saniko Curious what solution did you end up with here?

[saniko]

I used a HOC:

import React, { Component } from 'react';
import { VelocityTransitionGroup } from 'velocity-react';

const PageAnimatedWrapper = WrappedComponent => class PageAnimatedWrapper extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <VelocityTransitionGroup
          enter={{ animation: { opacity: 1 }, duration: 800 }}
          leave={{ animation: { opacity: 0 }, duration: 600 }}
          runOnMount
        >
          <WrappedComponent {...this.props} />
        </VelocityTransitionGroup>
      </div>
    );
  }
};

export default PageAnimatedWrapper;

On index.js i wrapped the componenet attrebute with that HOC:

<Route exact path="/" component={PageAnimatedWrapper(AsyncHome)} /> For some reason i could not use the HOC in the AsyncHome module , got some issues with events bubbling i guess. I'm using state injection decorators and mobx observables. Decorating the entire module did not work for me.