最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

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

来源：博客园


(相关资料图)

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

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

// cartDropdown.jsximport React from "react"import CartDropdownStyle from "./cartDropdown.module.css"export default function CartDropdown(props) {const {isCartOpen} = propsconst animationClass = isCartOpen ? CartDropdownStyle.animation__fadeIn : CartDropdownStyle.animation__fadeOutreturn (
Cart Dropdown
)}
/* 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将组件停留在动画的结束状态。

关键词：