React-motion mobile wep performance is too low

Question

I'm creating website with React + React-Router. I used react-router-transition to animate on switching views, and used React-motion-ui-pack to animate for little components.

The problem is when I tested on Desktop PC, animation is fine, but tested on mobile browser, it causes much lags.

As I know, react-router-transition and react-motion-ui-pack both using React-Motion. When I added animation with CSS3 Transforms, it does not worked, so I used just CSS properties directly(like using top/left instead of translate transforms).

This is part of my code:

export default class App extends React.Component {
    render() {
        return (
            <div id="App">
                <TopBar />
                <GlobalNav />

                <RouteTransition
                    pathname={this.props.location.pathname}
                    atEnter={{ opacity: 0.0 }}
                    atLeave={{ opacity: 1.0 }}
                    atActive={{ opacity: 1.0 }}>
                    <div id="views">
                        {this.props.children}
                    </div>
                </RouteTransition>

                <Footer />
            </div>
        );
    }
}

As you can see, I modified opacity onEnter and onLeave. But this causes so much low performance on the mobile devices.

Is there a way to solve this problem?