我在ReactJS和GatsbyJS(V2)项目中使用react-transition-group.
我的页面过渡使用动画但是当链接退出时,退出的动画被缩短,因为下一页已准备好进入.
我已经尝试延迟链接操作,但在页面更改被延迟时,退出动画不会被触发,直到延迟结束并且链接被操作.
如何在启动现有动画onClick的同时延迟页面更改？或者,是否有更好的方式或道具？
这是我的代码
Layout.js
class Layout extends React.Component {
...
return (
<Transition>{children}</Transition>
);
}
Transition.js
class Transition extends React.Component {
constructor(props) {
super(props);
this.state = { exiting: false };
this.listenerHandler = this.listenerHandler.bind(this);
}
listenerHandler() {
this.setState({ exiting: true });
}
componentDidMount() {
window.addEventListener(historyExitingEventType,this.listenerHandler);
}
componentWillUnmount() {
window.removeEventListener(historyExitingEventType,this.listenerHandler);
}
static getDerivedStateFromProps({ exiting }) {
if (exiting) {
return { exiting: false };
}
return null;
}
render() {
const transitionProps = {
timeout: {
enter: 0,exit: timeout
},appear: true,in: !this.state.exiting
};
return (
<ReactTransition {...transitionProps}>
{status => (
<div
style={{
...getTransitionStyle({ status,timeout })
}}
>
{this.props.children}
</div>
)}
</ReactTransition>
);
}
}
export default Transition;
盖茨比-config.js
import createHistory from 'history/createBrowserHistory';
const timeout = 1500;
const historyExitingEventType = `history::exiting`;
const getUserConfirmation = (pathname,callback) => {
const event = new CustomEvent(historyExitingEventType,{
detail: { pathname }
});
window.dispatchEvent(event);
setTimeout(() => {
callback(true);
},timeout);
};
let history;
if (typeof document !== 'undefined') {
history = createHistory({ getUserConfirmation });
history.block(location => location.pathname);
}
export const replaceHistory = () => history;
export { historyExitingEventType,timeout };
getTransitionStyle.js
const getTransitionStyles = timeout => {
return {
entering: {
transform: `scale(1.05) translateZ(0)`,opacity: 0
},entered: {
transition: `transform 750ms ease,opacity ${timeout}ms ease`,transitionDelay: `750ms`,transform: `scale(1) translateZ(0)`,opacity: 1
},exiting: {
transition: `transform 750ms ease,transform: `scale(0.98) translateZ(0)`,opacity: 0
}
};
};
const getTransitionStyle = ({ timeout,status }) =>
getTransitionStyles(timeout)[status];
export default getTransitionStyle;
解决方法
Gatsby v2正在使用Reach Router而不是React Router,因此使用带有replaceHistory的getUserConfirmation将不再起作用.在Gatsby v2 RC中,您可以使用react-pose创建页面转换更简单一些：
gatsby-browser.js和gatsby-ssr.js：
import React from "react"
import Transition from "./src/components/transition"
export const wrapPageElement = ({ element,props }) => {
return <Transition {...props}>{element}</Transition>
}
transition.js组件：
import React from "react"
import posed,{ PoseGroup } from "react-pose"
const timeout = 250
class Transition extends React.PureComponent {
render() {
const { children,location } = this.props
const RoutesContainer = posed.div({
enter: { delay: timeout,delayChildren: timeout },})
// To enable page transitions on mount / initial load,// use the prop `animateOnMount={true}` on `PoseGroup`.
return (
<PoseGroup>
<RoutesContainer key={location.pathname}>{children}</RoutesContainer>
</PoseGroup>
)
}
}
export default Transition
在您的网页内：
// Use `posed.div` elements anywhere on the pages.
const Transition = posed.div({
enter: {
opacity: 1,},exit: {
opacity: 0,})
// ...
<Transition>Hello World!</Transition>
检查official example是否有工作演示.