我有一个React组件用于错误消息元素
我想知道是否有一种CSS/React的方法可以在该元素从DOM中删除时对其进行动画处理?当渲染正常时,我可以进行动画处理。
这是一个测试用的CodeSandBox。
以下是我的SASS。
ErrorMessage
,它要么返回具有子元素的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;
}
}
以下是我的错误消息组件
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>
非常感谢您的帮助!