我有一个用于错误消息元素 ErrorMessage
的 React 组件,它要么返回一个带有子元素的 div 元素,要么返回 null
,以便它从 DOM 中删除。
我很好奇是否有一种方法可以使用 CSS/React 在元素从 DOM 中移除时对其进行动画处理?当渲染良好时,我可以制作动画。
这是一个CodeSandBox对其进行测试。
这是我的 SASS
.ErrorMessages {
background: #ee4900;
color: #fff;
border: 0;
color: #fff;
padding: 0.8em 1em;
text-align: left;
font-size: 12px;
margin-top: 10px;
margin-bottom: 10px;
animation-duration: 0.5s;
animation-fill-mode: both;
animation-name: fadeInUp;
}
.ErrorMessages--Centered {
padding-top: 30px;
padding-right: 70px;
padding-left: 70px;
}
.ErrorMessages--fadeOut {
animation-name: fadeOutDown;
}
@keyframes fadeOutDown {
from {
opacity: 1;
max-height: 72px;
}
to {
opacity: 0;
padding: 0;
margin: 0;
max-height: 0;
transform: translate3d(0, 50px, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
padding: 0;
margin: 0;
max-height: 0;
transform: translate3d(0, 50px, 0);
}
to {
opacity: 1;
}
}
下面是我的 ErrorMessage 组件
import React from "react";
const ErrorMessage = props => {
let err = props.show ? (
<div className="ErrorMessages ErrorMessages--Centered">
<h4>{props.errorHeader}</h4>
<p>{props.errorMessage}</p>
</div>
) : null;
return err;
};
export default ErrorMessage;
在 DOM 中呈现为
<div class="ErrorMessages ErrorMessages--Centered"></div>
如有任何帮助,我们将不胜感激!
最佳答案
您可以setTimeout
并在props.show
更改时引发动画标志。像这样:
const ErrorMessage = props => {
const [show, setShow] = useState(props.show);
const [hide, setHide] = useState(!props.show);
const timeoutRef = useRef(null);
useEffect(() => {
if (props.show) {
setShow(true);
setHide(false);
clearTimeout(timeoutRef.current);
}
else {
setShow(false);
timeoutRef.current = setTimeout(() => setHide(true), props.delay || 1000);
}
}, [props.show]);
/* unmount cleanup */
useEffect(() => () => clearTimeout(timeoutRef.current), []);
let err = !hide ? (
<div className={'ErrorMessages ErrorMessages--Centered' + (show ? '' : ' ErrorMessages--fadeOut')}>
<h4>{props.errorHeader}</h4>
<p>{props.errorMessage}</p>
</div>
) : null;
return err;
};
关于javascript - 从 DOM 中移除时向元素添加动画/过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55396622/