首页 > 其他分享 >01-React-组件-TransitionGroup

01-React-组件-TransitionGroup

时间:2023-09-23 12:33:06浏览次数:42  
标签:heroList TransitionGroup 01 动画 绑定 React item 类名

TransitionGroup 的作用,博主用通俗易懂的话来讲就是一个一组元素添加动画,在我们的实际开发当中有时可能会有这么一个需求就是,在一个页面上,有添加和删除,在做这些操作的时候需要都带上动画,那么这个时候就可以使用 TransitionGroup 来快速实现。

案例

App.js:

import React from 'react';
import './App.css'
import {CSSTransition, TransitionGroup} from 'react-transition-group';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            heroList: [
                {id: 1, name: '鲁班'},
                {id: 2, name: '虞姬'},
                {id: 3, name: '黄忠'},
            ]
        }
    }

    render() {
        return (
            <div>
                <ul>
                    <TransitionGroup>
                        {
                            this.state.heroList.map((obj, index) => {
                                return (
                                    <CSSTransition key={obj.id}
                                                   timeout={3000}
                                                   classNames={'item'}
                                    >
                                        <li
                                            onClick={() => {
                                                this.removeHero(index)
                                            }}
                                        >
                                            {obj.name}
                                        </li>
                                    </CSSTransition>
                                )
                            })
                        }
                    </TransitionGroup>
                </ul>
                <button
                    onClick={() => {
                        this.btnClick()
                    }}
                >
                    新增
                </button>
            </div>
        );
    }

    btnClick() {
        this.setState({
            heroList: [...this.state.heroList, {id: this.state.heroList.length + 1, name: '阿珂'}]
        })
    }

    removeHero(index) {
        const list = this.state.heroList.filter((idx) => {
            return idx !== index;
        })
        this.setState({
            heroList: list
        })
    }
}

export default App;

App.css:

.item-enter {
    /*
    进入动画执行之前绑定的类名
    */
    opacity: 0;
    transform: translateX(100%);
}

.item-enter-active {
    /*
    进入动画执行过程中绑定的类名
    */
    opacity: 1;
    transform: translateX(0);
    transition: all 3s;
}

.item-enter-done {
    /*
    进入动画执行完毕之后绑定的类名
    */
}

.item-exit {
    /*
    退出动画执行之前绑定的类名
    */
    opacity: 1;
    transform: translateX(0);
}

.item-exit-active {
    /*
    退出动画执行过程中绑定的类名
    */
    opacity: 0;
    transform: translateX(100%);
    transition: all 3s;
}

.item-exit-done {
    /*
    退出动画执行完毕之后绑定的类名
    */
}

注意点

  • 在企业开发中一定要保证 CSSTransition key 的唯一性,否则动画会失效
  • TransitionGroup 与 CSSTransition 是紧贴的,中间不能包含其它元素,否则动画则不会生效

标签:heroList,TransitionGroup,01,动画,绑定,React,item,类名
From: https://www.cnblogs.com/lzAurora/p/17724200.html

相关文章

  • P6667 [清华集训2016] 如何优雅地求和 -Binomial Sum
    题面有一个多项式函数\(f(x)\),最高次幂为\(x^m\),定义变换\(Q\):\[Q(f,n,x)=\sum_{k=0}^{n}f(k)\binom{n}{k}x^k(1-x)^{n-k}\]现在给定函数\(f\)和\(n,x\),求\(Q(f,n,x)\bmod998244353\)。出于某种原因,函数\(f\)由点值形式给出,即给定\(a_0,a_1,⋯,a_m\)共\(m+1\)个......
  • Flutter/Dart第01天:Dart安装和初体验
    本博客原地址:https://ntopic.cn/p/2023092301/Dart的安装方式有几种:一种是下载源代码,然后编译安装;一种是通过包管理工具进行安装。Dart官方网站分表列出了针对Windows、Linux和MacOS的安装方式:https://dart.dev/get-dart我下面在个人MacOS上介绍brew包管理工具安装方法和过程:......
  • React面试
    1.什么是虚拟DOM?虚拟DOM是真实DOM在内存中的表示,ul的表示形式保存在内存中,并且与实际的DOM同步,这是一个发生在渲染函数被调用和元素在屏幕上显示的步骤,整个过程被称为调和2.类组件和函数组件之间的区别是什么?类组件可以使用其他特性,如状态和生命周期钩子,并且他有this函数组件只......
  • 自我介绍102101631
    自我介绍我叫陈康杰,学号是102101631我来自fzu我平常喜欢看一些历史文我最喜欢的歌手是周杰伦我最喜欢的歌曲是《一路向北》食堂里我最喜欢的是烤盘饭(虽然每次吃饱都花了很多的币)......
  • 用户故事与敏捷开发 读书笔记 01
    软件需求是一个沟通问题,一旦任何一方在沟通中把持绝对地位,项目就会遭受损失。我们需要一种协同工作的方式,让双方都不占绝对主导地位,共同面对感情用事和办公室政治化的资源分配问题。什么是用户故事?每个用户故事代表了一个独立的功能,即用户在一个单一环境中可能做的事情。用户故......
  • React的onChange事件支持冒泡
    React的合成事件,所有事件都冒泡到document,带来的一个方便的地方就是,原本原生事件不支持冒泡的,在React中都支持冒泡例如focus,blur,change,submit,reset,select等事件不支持冒泡,但是在React中,可以使用同名的合成事件来支持冒泡,这样可以带来一个好处,减少事件挂载例如对radio组挂......
  • POI2018
    P5955Pionek题意给出\(n\)个平面向量,要求选择一些向量使它们和的模长最大,输出最大模长。题解假设已知答案向量方向,观察题目可以发现,只有在答案向量方向投影为正的向量才会对结果产生贡献。由此考虑枚举所有方向。对所有向量的极角排序,排序后可以确定选取的向量一定是连续......
  • ubuntu18更新失败提示401 Unauthorized
    当ubuntu18执行sudoaptupdatesudoaptupgrade在upgrade的过程中会出现以下错误122esm-infrasecurityupdatesNeedtoget309MB/309MBofarchives.Afterthisoperation,122MBofadditionaldiskspacewillbeused.Err:1https://esm.ubuntu.com/infra/ubuntu......
  • P9013 [USACO23JAN] Find and Replace S
    前言这是考试的时候放的一道题,考的时候没做出来。调了一个晚上,心态爆炸,故作此篇。顺便,鸣谢泥土笨笨大佬的题解,给我的代码提供了强有力的对拍参照。正题首先看到题目,虽然字符串长度不超过\(10^5\),但是还是嫌多;再一看,至多只有52个字符。那么从这个数据范围入手,思考可以按照变......
  • 「解题报告」CSP - S 2019
    总分:100+55+10+32+12+40=249。[CSP-S2019]格雷码题目描述通常,人们习惯将所有\(n\)位二进制串按照字典序排列,例如所有2位二进制串按字典序从小到大排列为:00,01,10,11。格雷码(GrayCode)是一种特殊的\(n\)位二进制串排列法,它要求相邻的两个二进制串间恰好有一位......