[英]Exit delay animation in react-transition-group
I am using react-transition-group in a ReactJS and GatsbyJS (V2) project. 我在ReactJS和GatsbyJS (V2)项目中使用react-transition-group 。
I have my page transitions working with animation but when Link
exit, the exiting
animation is cut short because the next page is ready for entering. 我的页面过渡与动画一起使用,但是当退出
Link
,由于准备好进入下一页, exiting
动画被缩短。
I have tried delaying the Link
action but whilst the page change was delayed, the exit
animation is not triggered until the delay
was over and the Link
was actioned. 我尝试延迟“
Link
操作,但是尽管页面更改被延迟,但直到delay
结束并且Link
已执行,才触发exit
动画。
How can I delay
the page change, whilst initiating the exiting
animation onClick
? 在启动
exiting
动画onClick
,如何delay
页面更改? Alternatively, is there a better way or props
available? 或者,是否有更好的方法或
props
可用?
Here is my code 这是我的代码
Layout.js Layout.js
class Layout extends React.Component {
...
return (
<Transition>{children}</Transition>
);
}
Transition.js 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;
gatsby-config.js gatsby-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 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, opacity ${timeout}ms ease`,
transform: `scale(0.98) translateZ(0)`,
opacity: 0
}
};
};
const getTransitionStyle = ({ timeout, status }) =>
getTransitionStyles(timeout)[status];
export default getTransitionStyle;
Gatsby v2 is using Reach Router instead of React Router, so using getUserConfirmation
with replaceHistory
will not work anymore. Gatsby v2使用的是Reach Router而不是React Router,因此将
getUserConfirmation
与replaceHistory
getUserConfirmation
使用将不再起作用。 In the Gatsby v2 RC you can use react-pose
to create page transitions a little more straightforward: 在Gatsby v2 RC中,您可以使用
react-pose
来创建页面转换,方法更为简单:
gatsby-browser.js and gatsby-ssr.js : 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 component: 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
Inside your pages : 在您的页面内 :
// Use `posed.div` elements anywhere on the pages.
const Transition = posed.div({
enter: {
opacity: 1,
},
exit: {
opacity: 0,
},
})
// ...
<Transition>Hello World!</Transition>
Check the official example for a working demo. 查看官方示例以获取有效的演示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.