javascript - React-motion モバイル Web のパフォーマンスが低すぎる

Question

React + React-Router で Web サイトを作成しています。ビューの切り替えをアニメーション化するために react-router-transition を使用し、小さなコンポーネントをアニメーション化するために React-motion-ui-pack を使用しました。

問題は、デスクトップ PC でテストしたときのアニメーションは問題ありませんが、モバイル ブラウザーでテストすると、かなりの遅延が発生することです。

私が知っているように、react-router-transition と react-motion-ui-pack は両方とも React-Motion を使用しています。CSS3 Transforms でアニメーションを追加するとうまくいかないので、CSS プロパティだけを直接使用しました (translate Transforms の代わりに top/left を使用するなど)。

これは私のコードの一部です:

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>
        );
    }
}

ご覧のとおり、不透明度の onEnter と onLeave を変更しました。しかし、これにより、モバイル デバイスのパフォーマンスが大幅に低下します。

この問題を解決する方法はありますか?