用react写一个进出场动画的组件
时间: 2023-07-01 21:22:26 浏览: 50
好的,可以使用React Transition Group库来实现进出场动画的组件。以下是一个简单的示例代码:
```jsx
import React from 'react';
import { CSSTransition } from 'react-transition-group';
import './FadeInOut.css'; // 引入CSS文件
const FadeInOut = ({ in: inProp, children }) => {
return (
<CSSTransition
in={inProp}
timeout={300} // 动画持续时间
classNames="fade"
unmountOnExit
>
{children}
</CSSTransition>
);
};
export default FadeInOut;
```
其中,`inProp`是一个布尔值,用于控制组件进出场的状态。`children`是组件的子元素,需要在动画中进行进出场的元素应该作为`children`传递给组件。
同时,需要在CSS文件中定义动画效果,例如:
```css
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 300ms ease-in;
}
```
以上代码实现了一个简单的淡入淡出效果,可以通过修改CSS文件来实现更多样的动画效果。