React-motion移动wep性能太低

Question

我正在使用React + React-Router创建网站。我使用react-router-transition为切换视图设置动画，并使用React-motion-ui-pack为小组件设置动画。

问题是当我在台式电脑上测试时，动画很好，但在移动浏览器上进行了测试，它会造成很大的滞后。

据我所知，反应路由器转换和react-motion-ui-pack都使用React-Motion。当我使用CSS3 Transforms添加动画时，它不起作用，所以我直接使用CSS属性（比如使用top / left而不是translate transforms）。

这是我的代码的一部分：

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的不透明度。但这会导致移动设备的性能低下。

有没有办法解决这个问题？