在实现一个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将组件停留在动画的结束状态。
标签:__,动画,translateY,React,animation,组件 From: https://www.cnblogs.com/ruoyxue/p/17327968.html