我正在使用 Next.js 的新 _app.js
文件来尝试创建页面过渡,例如淡入淡出或幻灯片,但无法理解它。我正在使用样式组件来应用样式。我的结构目前如下所示:
_app.js
import App, { Container } from 'next/app';
import React from 'react';
import PageTransition from '../components/PageTransition';
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return (
<Container>
<PageTransition>
<Component {...pageProps} />
</PageTransition>
</Container>
);
}
}
export default MyApp;
组件/PageTransition/index.jsx
import { Transition } from 'react-transition-group';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import Root from './index.style';
class PageTransition extends Component {
state = {
active: true,
}
componentDidUpdate() {
// Check if children are different to previous children
// If true, set this.state.active to false
// After 1000ms transition, set to true again
}
render() {
const { children } = this.props;
const { active } = this.state;
return (
<Transition in timeout={1000}>
<Root id="root" active={active}>
{children}
</Root>
</Transition>
);
}
}
export default PageTransition;
components/PageTransition/index.style.js
import styled from 'styled-components';
const Root = styled.div`
opacity: ${p => (p.active ? 1 : 0)};
transition: opacity 1000ms;
`;
export default Root;
这是正确的方法吗?如果是这样,我认为 componentDidUpdate 不足以很快捕获页面更改。我尝试进行这项工作,但它进行了渲染,您会在状态再次更新之前看到页面的闪烁,告诉它开始淡出然后淡入。我需要在渲染之前更新状态。
有没有办法用 React Transition Group 来处理这个问题?我确实看过next-page-transitions但对该包的使用率较低感到不舒服,我只是想要一个更简单的解决方案。
最佳答案
我最近也在研究如何实现这一目标。查看下一页转换的简要文档,实现简单的淡入/淡出页面转换就像在 App 组件渲染方法中使用它一样简单:
render() {
const { Component, pageProps } = this.props
return (
<Container>
<PageTransition timeout={300} classNames="page-transition">
<Component {...pageProps} />
</PageTransition>
<style jsx global>{`
.page-transition-enter {
opacity: 0;
}
.page-transition-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.page-transition-exit {
opacity: 1;
}
.page-transition-exit-active {
opacity: 0;
transition: opacity 300ms;
}
`}</style>
</Container>
)
}
但是,我看到您正在尝试使用react-transition-group。如果您希望实现更复杂的动画,这就是您需要使用的库。
这是我使用react-transition-group进行的快速测试的应用程序组件渲染方法的示例:
render() {
const { Component, pageProps } = this.props;
return (
<Container>
<div ref={x => (this.comp = x)}>
<TransitionGroup>
<Transition
in={this.props.in}
key={this.props.router.route}
timeout={{
enter: 2000,
exit: 2000
}}
mountOnEnter={false}
unmountOnExit={true}
onEnter={this.enterTransition}
>
<Component {...pageProps} />
</Transition>
</TransitionGroup>
</div>
</Container>
);
}
注意:我使用 GSAP 来制作动画,在我所做的测试中,我需要在初始安装时引用组件的内容。如果您不需要这个,那么您可以删除该 div,然后确保为 onEnter 提供一个将在每个页面导航时调用的函数。
enterTransition = node => {
TweenMax.fromTo(node, 0, { x: 0, opacity: 0 }, {x: 200, opacity: 1});
}
该节点将是下一个要安装的组件。 还有一个 onExit Hook ,您可以使用它以类似的方式定位退出节点。
关于javascript - Next.js 页面过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52349003/