Производительность мобильного Weap React-Motion слишком низкая

Question

Я создаю сайт с помощью React + React-Router. Я использовал response-router-transition для анимации при переключении представлений и использовал React-motion-ui-pack для анимации небольших компонентов.

Проблема в том, что когда я тестировал на настольном ПК, анимация в порядке, но тестировалась на мобильном браузере, это вызывает большие лаги.

Как я знаю, response-router-transition и response-motion-ui-pack оба используют React-Motion. Когда я добавил анимацию с помощью CSS3 Transforms, это не сработало, поэтому я использовал только CSS-свойства напрямую (например, используя верхнюю / левую сторону вместо 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. Но это приводит к очень низкой производительности на мобильных устройствах.

Есть ли способ решить эту проблему?