如何解决反应过渡组过渡进入动画不适用于 unmountOnExit?
我使用 react-transition-group
创建了一个过渡并添加了 unmountOnExit
,这会导致进入动画不起作用。删除 unmountOnExit
时,输入动画有效。
这是一个CodeSandbox demo
我在 GitHub 上打开了一个问题,但我想知道我的代码是否有问题。
const duration = 300;
const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out,transform ${duration}ms ease-in-out`,opacity: 0,transform: 'scale(.1)',};
const transitionStyles = {
entering: { opacity: 1,transform: 'none' },entered: { opacity: 1,exiting: { opacity: 0,transform: 'scale(.1)' },exited: { opacity: 0,};
const FadeScaleAlert = ({ in: inProp }) => (
<Transition in={inProp} timeout={duration} unmountOnExit>
{(state) => (
<Alert
variant="primary"
style={{
...defaultStyle,...transitionStyles[state],}}
>
<Alert.Heading>
Animated alert message
</Alert.Heading>
<p>
This alert message is being transitioned in and
out of the DOM.
</p>
</Alert>
)}
</Transition>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。