flip-move

介绍

FLIP 是一种高效的动画技术，用于在 Web 应用程序中创建平滑的动画效果。FLIP 是“First, Last, Invert, Play”四个词的首字母缩写 ，它描述了实现动画的四个步骤流程。这种方法特别适用于那些涉及到元素尺寸（如宽度和高度）、位置（如页面上的坐标）或者其他可 以通过 CSS 变化的属性（如颜色）发生大的变化的动画效果。使用 FLIP，动画的性能可以得到显著的提升，尤其是在移动设备和性能较 差的机器上。

安装

$ npm i flip-move

$ pnpm i flip-move

$ yarn add flip-move

推荐使用的 node 版本和 npm 版本

{
  "node": ">=14.x.x",
  "npm": ">=6.x.x"
}

使用教程

import Flip from 'flip-move';

const div = document.querySelector('div');

/**
 * 初始化
 *
 * @param {Element} container 父容器元素
 * @param {number} duration 动画持续时间（默认值：500，单位：ms）
 */
const flip = new Flip(div, 500);

/**
 * 步骤1
 *
 * 记录初始状态（通常是页面元素的位置和尺寸）
 */
flip.first();

/**
 * 步骤2
 *
 * 根据自己的需求来定义元素怎么变化
 *
 * 这个是Demo（把容器最底部的元素插入到最顶部）
 */
const { children } = div;
const newnode = children[children.length - 1];
div.insertBefore(newnode, children[0]);

/**
 * 步骤3
 *
 * 使元素从反转的状态过渡到结束状态，会自动记录结束状态
 */
flip.play({
  // 当前变化的元素（可选）
  transform: (element) => {},
  // 单个动画结束回调（可选）
  callback: (element) => {},
  // 整体动画结束回调
  complete: () => {},
});

简单示例

import Flip from 'flip-move';

const list = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple'];

const div = document.createElement('div');

div.innerHTML = list.map((rgb) => `<div style="background-color:${rgb};">${rgb}</div>`).join('');

document.body.appendChild(div);

const flip = new Flip(div, 1000);

function play() {
  flip.first();

  const { children } = div;
  const newnode = children[children.length - 1];
  div.insertBefore(newnode, children[0]);

  flip.play({ complete: play });
}

play();