React-Flip-Move 动画效果详解：元素进入与离开的优雅过渡

袁菲李

于 2025-06-10 09:02:07 发布

阅读量271

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00534/article/details/148549075

React-Flip-Move 动画效果详解：元素进入与离开的优雅过渡

react-flip-move Effortless animation between DOM changes (eg. list reordering) using the FLIP technique. 项目地址: https://gitcode.com/gh_mirrors/re/react-flip-move

前言

在现代前端开发中，流畅的动画效果能够显著提升用户体验。React-Flip-Move 作为一个专门为列表项设计的动画库，通过简洁的 API 实现了元素位置变化时的平滑过渡效果。本文将深入解析该库的进入(enter)和离开(leave)动画功能，帮助开发者掌握创建优雅界面过渡的技巧。

核心概念

React-Flip-Move 的核心原理是基于 FLIP 动画技术（First, Last, Invert, Play）。这种技术通过计算元素位置变化，然后应用反向变换来实现平滑过渡。对于元素的进入和离开动画，库提供了多种预设效果和自定义选项。

预设动画效果

React-Flip-Move 提供了四种开箱即用的动画预设，每种都有其独特的视觉效果：

1. 电梯效果(Elevator) - 默认

<FlipMove enterAnimation="elevator" leaveAnimation="elevator" />

电梯效果是默认设置，元素会像电梯一样垂直移动，给人一种稳重而流畅的感觉。适合大多数通用场景。

2. 淡入淡出效果(Fade)

<FlipMove enterAnimation="fade" leaveAnimation="fade" />

最简单的过渡效果，元素通过透明度变化实现平滑的显示和消失。适合需要最小干扰的场景。

3. 垂直手风琴效果(Accordion Vertical)

<FlipMove enterAnimation="accordionVertical" leaveAnimation="accordionVertical" />

元素像手风琴一样垂直展开和折叠，为列表变化增加了生动的视觉效果。

4. 水平手风琴效果(Accordion Horizontal)

<FlipMove enterAnimation="accordionHorizontal" leaveAnimation="accordionHorizontal" />

与垂直版本类似，但动画方向变为水平，适合横向布局的场景。

自定义动画

当预设效果无法满足需求时，React-Flip-Move 提供了强大的自定义动画能力：

<FlipMove
  staggerDelayBy={150}
  enterAnimation={{
    from: {
      transform: 'rotateX(180deg)',
      opacity: 0.1,
    },
    to: {
      transform: '',
    },
  }}
  leaveAnimation={{
    from: {
      transform: '',
    },
    to: {
      transform: 'rotateX(-120deg)',
      opacity: 0.1,
    },
  }}
>
  {this.renderRows()}
</FlipMove>

自定义动画要点

from 和 to 对象：分别定义动画开始和结束时的状态
CSS 属性：支持任何有效的 CSS 属性，但推荐优先使用 transform 和 opacity 以获得最佳性能
性能优化：transform 和 opacity 属性不会触发重排，动画性能最佳
初始状态：to 状态为空字符串时会恢复元素原始样式

初始渲染动画(appearAnimation)

默认情况下，enterAnimation 不会在组件初次渲染时触发。如果需要初始渲染动画，需要使用 appearAnimation 属性：

<FlipMove
  staggerDelayBy={150}
  appearAnimation="accordionVertical"
  enterAnimation="fade"
  leaveAnimation="fade"
>
  {this.renderRows()}
</FlipMove>