526互联

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

发布时间 2023-04-17 23:28:31作者: ruoyxue

在实现一个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将组件停留在动画的结束状态。