5

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

问题是当我在台式电脑上测试时，动画很好，但在移动浏览器上测试时，它会导致很多滞后。

据我所知，react-router-transition 和 react-motion-ui-pack 都使用 React-Motion。当我使用 CSS3 变换添加动画时，它不起作用，所以我直接使用了 CSS 属性（比如使用顶部/左侧而不是平移变换）。

这是我的代码的一部分：

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。但这会导致移动设备的性能非常低。

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

4

0 回答 0