如何解决CSSTransition 中的“出现”无法按预期工作
我想实现 CSSTransition
来为元素设置动画,但仍然立即安装它。
默认情况下,无论 in 的值如何,子组件在第一次挂载时都不会执行 enter 转换。如果您想要这种行为,请将出现和输入都设置为 true。
所以我认为这个例子会起作用:
<CSSTransition
in={showMessage}
appear={showMessage}
timeout={300}
classNames="alert"
>
.alert-enter,.alert-appear {
opacity: 0;
transform: scale(0.9);
}
.alert-enter-active,.alert-appear-active {
opacity: 1;
transform: translateX(0);
transition: opacity 300ms,transform 300ms;
}
.alert-exit {
opacity: 1;
}
.alert-exit-active {
opacity: 0;
transform: scale(0.9);
transition: opacity 300ms,transform 300ms;
}
这是一个代码沙盒:https://codesandbox.io/s/keen-forest-ghgxq?file=/index.js
如您所见,它立即显示。我需要将它隐藏但仍然安装。我该怎么做?
解决方法
但是您没有设置 show
组件的 Alert
属性。所以到default,它是true
这是在开始时隐藏它,然后显示和取消显示的方法,sandbox
代码:
import React,{ useEffect,useState } from 'react';
import ReactDOM from 'react-dom';
import { Container,Button,Alert } from 'react-bootstrap';
import { CSSTransition } from 'react-transition-group';
import './styles.css';
function Example() {
const [showMessage,setShowMessage] = useState(false);
useEffect(() => {
setTimeout(() => {
setShowMessage(true);
},10000);
},[]);
return (
<Container style={{ paddingTop: '2rem' }}>
<CSSTransition
in={showMessage}
exit={showMessage}
appear={showMessage}
timeout={300}
classNames="alert"
>
<Alert
variant="primary"
dismissible
show={showMessage}
onClose={() => setShowMessage(false)}
>
<Alert.Heading>
Animated alert message
</Alert.Heading>
<p>
This alert message is being transitioned in and
out of the DOM.
</p>
<Button onClick={() => setShowMessage(false)}>
Close
</Button>
</Alert>
</CSSTransition>
<button onClick={() => setShowMessage(true)}>
Show me
</button>
</Container>
);
}
ReactDOM.render(
<Example />,document.getElementById('root')
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。