joshwcomeau/react-flip-move
React Flip Move
react-flip-move 是一个 React 动画库，旨在利用 FLIP 技术为 DOM 元素过渡和列表重排序添加动画效果。它作为一个布局过渡组件和 DOM 过渡工具，可在状态变更期间创建平滑的移动效果。
该库专注于元素在列表中添加、删除或重排序时的硬件加速过渡。它采用边界框位置跟踪来计算布局偏移，并支持交错动画计时以创建序列化的视觉流。
其功能涵盖布局过渡编排，包括进入和退出动画、初始挂载序列，以及防止布局跳动的容器尺寸保持。该系统还为自定义位置检测和包装元素定义提供了生命周期回调和配置选项。
Features
- Layout Transition Engines - Acts as a layout transition engine that automatically orchestrates smooth movement and geometry changes during DOM updates.
- Reordering Animations - Provides smooth hardware-accelerated transitions for items being reordered within a list.
- FLIP Animations - Uses the FLIP technique to simulate smooth movement between different DOM states.
- React Implementations - Provides a specialized React library for animating DOM element transitions and list reordering using the FLIP technique.
- UI Element Bounding Boxes - Captures DOM element bounding boxes to calculate exact translation distances for layout shifts.
- Element Transitioning Mechanisms - Manages the entry and exit animations of components to ensure visual continuity during updates.
- Layout-Driven Position Transitions - Moves elements between positions using layout-calculating techniques for smooth visual transitions.
- Hardware-Accelerated UI Transitions - Offloads animations to the GPU using CSS transform and opacity properties for high frame rates.
- List Transition Animations - Creates smooth visual transitions for React lists during item reordering, addition, or removal.
- Group Enter-Update-Exit Animators - Implements hardware-accelerated animations for elements as they enter or exit the document.
- Animation Lifecycle Callbacks - Provides hooks that execute custom logic at the start and end of animation sequences.
- Mounting Animations - Triggers specific animation sequences during the initial mount of components to the DOM.
- Layout Dimension Animators - Includes utilities to prevent layout jumps by animating container dimensions during element removal.
- Runtime Height Calculators - Measures rendered heights at runtime to maintain container dimensions during removal sequences.
- Staggered Animations - Implements incremental delays for subsequent elements to create natural, sequenced movement.
- Motion Design Frameworks - Implements high-fidelity motion and staggered transitions to polish web application user interfaces.
- UI Animation - Animates DOM changes using the FLIP technique.
