React Transition Group -- TransitionGroup 组件

2019-02-12 admin

导语

Transition组件 CSSTransition组件

该库的前两个基本组件可以查看以上链接🔗,今天搬到了新的房子里,还是很满意的,明天就要去新公司报道了,希望能和新同事好好相处,完成2019年的几个目标。

TransitionGroup

<TransitionGroup>组件管理列表中的一组<Transition>组件。与<Transition>类似,<TransitionGroup>是一种状态机,用于管理组件随时间的安装和卸载。

下面的例子使用了之前的渐变CSS过渡。当项目被删除或添加到TodoList时,in属性会被自动切换。可以在<TransitionGroup>中使用任何<Transition>组件,而不仅仅是css。

第一步: 导入需要的文件

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

第二步:编写初始state里的列表项

state = {
    items: [
      { id: 1, text: 'Buy eggs' },
      { id: 2, text: 'Pay bills' },
      { id: 3, text: 'Invite friends over' },
      { id: 4, text: 'Fix the TV' },
    ]
  }

第三步:编写列表项

<TransitionGroup className="todo-list">
  {items.map(({ id, text }) => (
    <CSSTransition
      key={id}
      timeout={500}
      classNames="show">
      <div className="todo-list-item">
        <button
          className='cancle'
          onClick={() => {
            this.setState(state => ({
              items: state.items.filter(
                item => item.id !== id
              ),
            }));
          }}>
          &times;
        </button>
        <span className='item-text'>{text}</span>
      </div>
    </CSSTransition>
  ))}
</TransitionGroup>

记住,要把所有需要管理的列表项都写在<TransitionGroup> 中,其次,<CSSTranstion> 组件的in属性此时由<TransitionGroup> 管理了,不需要单独设置了,当点击删除按钮时,list中的对应项将会被删除,对应项的in 属性将会被自动改为false,从而触发离场动画。

第四步:添加按钮

<button
  className='add'
  onClick={() => {
    const text = prompt('Enter some text');
    if (text) {
      this.setState(state => ({
        items: [
          ...state.items,
          { id: 1123, text },
        ],
      }));
    }
  }}>
  Add Item
</button>

当点击添加按钮,输入文字后,将会把此项添加到列表中,此时in属性为true,同时默认设置了首次动画,所以会触发一次进场动画。

效果图

图片描述

完整代码

//index.js
import React,{ Component } from 'react'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import './css/index.css'

export default class App extends Component {

  state = {
    items: [
      { id: 1, text: 'Buy eggs' },
      { id: 2, text: 'Pay bills' },
      { id: 3, text: 'Invite friends over' },
      { id: 4, text: 'Fix the TV' },
    ]
  }

  render () {
    const { items } = this.state
    return (
      <div className='container'>
        <TransitionGroup className="todo-list">
          {items.map(({ id, text }) => (
            <CSSTransition
              key={id}
              timeout={500}
              classNames="show"
              unmountOnExit>
              <div className="todo-list-item">
                <button
                  className='cancle'
                  onClick={() => {
                    this.setState(state => ({
                      items: state.items.filter(
                        item => item.id !== id
                      ),
                    }));
                  }}>
                  &times;
                </button>
                <span className='item-text'>{text}</span>
              </div>
            </CSSTransition>
          ))}
        </TransitionGroup>
        <button
          className='add'
          onClick={() => {
            const text = prompt('Enter some text');
            if (text) {
              this.setState(state => ({
                items: [
                  ...state.items,
                  { id: 1123, text },
                ],
              }));
            }
          }}>
          Add Item
        </button>
      </div>
    )
  }
}

//index.css
.show-enter {
    opacity: 0.01;
  }
.show-enter-active {
    opacity: 1;
    transition: all 300ms ease-out;
}
.show-exit {
    opacity: 1;
}
.show-exit-active {
    opacity: 0.01;
    transition: all 300ms ease-out;
}

.container {
    position: absolute;
    top: 20px;
    left: 100px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px 1px rgb(202, 202, 202);
}

.todo-list {
    border-radius: 5px;
    box-shadow: 0 0 5px 1px rgb(202, 202, 202);
}

.todo-list-item {
    height: 35px;
    line-height: 35px;
    padding: 0 10px;
    border-bottom: 1px solid rgb(202, 202, 202);
}

.todo-list-item:last-of-type {
    border-bottom: 0;
}

.item-text {
    margin-left: 10px;
}

.cancle {
    border: 0;
    color: #fff;
    background-color: #F04134;
    border-radius: 3px;
    box-shadow: 0 0 5px 1px rgb(202, 202, 202);
}

.add {
    border: 0;
    height: 30px;
    line-height: 30x;
    width: 120px;
    margin-top: 15px;
    font-size: 14px;
    border-radius: 3px;
    box-shadow: 0 0 5px 1px rgb(202, 202, 202);
}

Porps

<TransitionGroup> 的常用属性主要就2个,其它的有兴趣可以去官网看看 👀

component

default ‘div’ 也就是TransitionGroup渲染出来的标签为div,也可以就行更改,例如component=“span” 渲染出来的就是span标签了

type: any default: ‘div’

children

相当于你给的组件,可以是字符串或者自定义组件等。

type: any

原文链接:https://segmentfault.com/a/1190000018120887

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-53542.html

文章标题:React Transition Group -- TransitionGroup 组件

相关文章
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = &#x27;&...
2017-03-15
VSCode配置react开发环境的步骤
vscode 默认配置对于 react 的 JSX 语法不友好,体现在使用自动格式化或者粘贴后默认缩进错误,尽管可以通过改变 language mode 缓解错误,但更改 language mode 后的格式化依然不够理想。 通过搭配使用 ...
2017-12-28
深入理解JavaScript的React框架的原理
如果你在两个月前问我对React的看法,我很可能这样说: 我的模板在哪里?javascript中的HTML在做些什么疯狂的事情?JSX开起来非常奇怪!快向它开火,消灭它吧! 那是因为我没有理解它. 我发誓,React 无疑是在正确的轨道...
2017-03-26
简化版手机端照片预览组件
可怜的我用着华为3C手机,用别人现成的组件都好卡,为了适应我这种屌丝,于是自己简化写了一版的照片预览效果,暂时无缩放功能,以后可能有空再加吧,你也可以自己加下,这是个github上的开源项目。它的github地址是:https://gith...
2017-03-22
angular2倒计时组件使用详解
项目中遇到倒计时需求,考虑到以后在其他模块也会用到,就自己封装了一个组件。便于以后复用。 组件需求如下: 接收父级组件传递截止日期 接收父级组件传递标题 组件效果 变量 组件countdown.html代码 &lt;div clas...
2017-03-11
最好用的Bootstrap fileinput.js文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存。 一、demo 二、插件引入 &lt;link type=“text/css” rel=“s...
2017-03-21
angularjs使用directive实现分页组件的示例
闲来没事,分享下项目中自己写的分页组件。来不及了,直接上车。 效果: 输入框可任意输入,并会自动提交到该页 依赖项: fontawesome,bootstrap html: &lt;ul class=&quot;page clearf...
2017-03-20
BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 &lt;span style=&quot;font-size:14px;&quot;&gt;&lt;link type=&quot;text&#x2F;css&quot; rel=&quot...
2017-03-16
适用于 Vue 2.0 的功能强大的 Contextmenu 组件
适用于 Vue 2.0 的 ContextMenu 组件。 中文 | English 安装 $ yarn add v-contextmenu # npm i -S v-contextmenu 概览 访问在线示例 或 查看在线示例 GIF...
2017-12-24
VUE开发一个图片轮播的组件示例代码
本人刚学习vue,用vue做了个图片轮播,下面我来记录一下,有需要了解VUE开发一个图片轮播的组件的朋友可参考。希望此文章对各位有所帮助。 完成效果图如下: vue开发的思路主要是数据绑定,代码如下: &lt;template&gt; ...
2017-03-14
回到顶部