首页 > 其他分享 >React 组件进入和退出动画实现

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

时间:2023-04-17 23:36:47浏览次数:36  
标签:__ 动画 translateY React animation 组件

在实现一个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

相关文章

  • React redux toolkit: Uncaught Error:[Immer] An immer producer returned a new...
    React在写一个购物车的reduxtoolkit时遇到了问题。核心代码如下:import{createSlice}from"@reduxjs/toolkit";constcartSlice=createSlice({name:'cart',initialState:{cartItems:[],cartItemCount:0},reducers:{......
  • cocos studio 2.3.3制作骨骼动画
    1、新建骨骼动画文件2、把需要的图片资源,比如头、武器等,拖动到工作区,形成Sprite控件,摆好各个图片第一帧的状态3、在形体模式下,点击工具栏目的创建骨骼:   每个骨骼对应1个Sprite【1条骨骼的起点和终点都是可以运动的】   第一个点击的骨骼是root,root旋转,他下面的child骨骼都......
  • cocos-js 播放cocos studio创建的时间轴场景动画
    ctor:1、加载场景动画json2、把场景动画的node添加到层3、找到运动的node4、关联动画和nodeload.node.runAction(load.action)播放:this._load.action.gotoFrameAndPlay(0,100,false);如果需要改变运动的node下面的子节点,可以把子节点removeFromParent然后创建一个新的Sp......
  • cocos2dx-js 帧动画的播放方法
    ctor:varload=ccs.load(res.Ani_json);varmainNode=load.node;this.addChild(mainNode);//对应帧动画的节点,使用seekWidgetByName无效,需要用getChildByNamethis._spriteAni=mainNode.getChildByName("spriteAni");this._spriteAni.setVisible(false);this._lo......
  • cocos studio 2.3.3创建帧动画
    新建一个layer文件左下角60FPS的下面有个+号【添加动画】点击+添加动画,设置好名称和帧数拖动帧的第一个图片到场景里面,自动生成一个sprite把所有的帧图全部拖动到sprite的节点层【当拖动到上面出现+号的时候,就可以放开鼠标了】根据时间轴有多少帧,重新设置下帧动画的配置【+号左边的......
  • react的思想和数据流
    最近忙着写前端界面,粗略讨论以下react的函数式编程思想和组件通信的应对思路。纯函数和副作用函数式编程中函数是一等公民。一个函数的返回值只取决于输入参数时,那么这个函数的行为是确定的,我们称之为纯函数。那么反过来,如果函数的输入参数相同,而返回值不确定,那么该函数就是有......
  • vue常用组件之confirm用法及说明
    vue常用组件之confirm用法及说明原文链接:https://www.jb51.net/article/263587.htm+目录vue组件之confirmvue自定义confirm弹窗(全局组件)全局组件方式vue组件之confirm一些自带的方法,比如alert,confirm等,往往由于浏览器不同而展现出不同的样式,为了统一,我们可以自己实现简单封装,......
  • LABjs异步加载组件
    加载外部js的方法大致有这么几种:方法说明XHREval     通过Ajax方式获取代码,并通过eval方式执行代码。XHRInjection     通过Ajax方式获取代码,并在页面上创建一个script元素,将Ajax取得的代码注入。ScriptinIframe      通过iframe加载js。Scr......
  • 卧龙苍天陨落cg动画可以回放吗 剧情动画能重新看吗_卧龙的梗
    才刚肝完《华阳:彼方横空出世》最后完整版,根本难以说淮南子+七国吗香!姿势格斗游戏太招揽我了,加之解像度、动效、声效也很极好。《华阳:彼方横空出世》这款暗影系七国表现手法的姿势格斗游戏,以西汉初年中原地区星辰为T台,进行了一连串的七国翻拍故事情节。玩者在格斗游戏上将化身为无......
  • Vue3中 如何使用ref标签,对组件进行操作
    在Vue2中一般用this.$ref.xxxx进行获取组件对象Vue3中就不使用这个方法了例如:<el-uploadclass="upload-demo"action="":http-request="handleUpload":on-change="handleChange":before-upload="handl......