如何使用react-flip-toolkit实现元素显隐动画效果

• Vue场景下做列表的入场、离场动画，直接使用内置的<transition-group>组件即可，组件会在元素插入、移除的生命周期节点自动追加对应状态的CSS类，开发者只需要给对应类名编写透明度、位移等过渡样式，就能实现流畅的列表动效，不需要手动干预DOM的增删时机。

react-flip-toolkit 实现透明度过渡方案 #

React生态下没有内置的列表过渡组件，用react-flip-toolkit可以快速实现和Vue transition-group体验一致的进出场动效，具体实现步骤如下：

1. 先安装依赖包

   npm i react-flip-toolkit
   

2. 用<Flipper>组件包裹整个列表容器，传入和列表渲染状态绑定的flipKey属性，当列表数据源变化时，组件会自动对比前后DOM差异计算动画流程。
3. 列表中每一个支持增删的单项都用<Flipped>组件包裹，给每个项配置全局唯一的flipId，同时通过onAppear、onExit属性定义元素出现、消失时的透明度过渡逻辑：
   • 元素入场时，先将初始透明度设为0，在指定动画时长内平滑过渡到完全不透明
   • 元素离场时，从完全不透明状态平滑过渡到透明，等动画执行完成后再移除对应DOM节点，避免动画未播放完成节点直接消失的问题

基础实现代码参考 #

import { Flipper, Flipped } from 'react-flip-toolkit'
import { useState } from 'react'

// 元素入场动画：从透明过渡到不透明
const handleAppear = (el) => {
  el.style.opacity = 0
  return {
    duration: 280,
    values: { opacity: 1 },
    onUpdate: (val) => {
      el.style.opacity = val.opacity
    }
  }
}

// 元素离场动画：从不透明过渡到透明，完成后移除DOM
const handleExit = (el, index, removeNode) => {
  el.style.opacity = 1
  return {
    duration: 280,
    values: { opacity: 0 },
    onUpdate: (val) => {
      el.style.opacity = val.opacity
    },
    onComplete: removeNode
  }
}

export default function TransList() {
  const [listData, setListData] = useState(['条目A', '条目B', '条目C'])
  return (
    <Flipper flipKey={listData.join('|')}>
      <div className="list-wrap">
        {listData.map(item => (
          <Flipped
            key={item}
            flipId={item}
            onAppear={handleAppear}
            onExit={handleExit}
          >
            <div className="list-item">{item}</div>
          </Flipped>
        ))}
      </div>
      {/* 增删列表项的交互逻辑可按需扩展 */}
    </Flipper>
  )
}

注意：和Vue transition-group自动注入CSS类的机制不同，react-flip-toolkit不会自动生成样式类，所有动画属性需要在回调中手动绑定到DOM样式上，这种实现的灵活度更高，可以自由组合透明度、位移、缩放等多维度动效，不受预设类名的规则限制。

内容的提问来源于stack exchange，提问作者Serio