React 组件进入和退出动画实现

在实现一个React中的弹框组件时，想给组件加个进入和退出动画，但发现React没有Vue3那样现成的api，因此需要自己设计。

主要思路为给组件添加一个state来选择className，不同的className会给组件添加不同的动画效果，再使用css animation中的forwards来使组件固定在结束的位置。核心代码如下：

// cartDropdown.jsx

import React from 'react'

import CartDropdownStyle from './cartDropdown.module.css'

export default function CartDropdown(props) {

	const {isCartOpen} = props

	const animationClass = isCartOpen ? CartDropdownStyle.animation__fadeIn : CartDropdownStyle.animation__fadeOut

	return (

		<div className={animationClass}>

			Cart Dropdown

		</div>

	)

}

/* cartDropdown.module.css */

.animation__fadeIn {

	animation: dropdownEnterFromTop .3s forwards ease-out;

}

.animation__fadeOut {

	animation: dropdownLeaveToTop .3s forwards ease-out;

}

@keyframes dropdownEnterFromTop {

	0% {

		opacity: 0;

		visibility: hidden;

		transform: translateY(-20px);

	}

	100% {

		opacity: 1;

		visibility: visible;

		transform: translateY(0);

	}

}

@keyframes dropdownLeaveToTop {

	0% {

		opacity: 1;

		visibility: visible;

		transform: translateY(0);

	}

	100% {

		opacity: 0;

		visibility: hidden;

		transform: translateY(-20px);

	}

}

基本思路很简单，每次需要更改弹框的状态都会更改CartDropdown组件的isCartOpen属性从而重新渲染组件，使之有不同的animation效果。通过设置animation-fill-mode属性为forwards将组件停留在动画的结束状态。

React 组件进入和退出动画实现的相关教程结束。