flip-move
TypeScript icon, indicating that this package has built-in type declarations

1.0.2 • Public • Published

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();

Package Sidebar

Install

npm i flip-move

Weekly Downloads

8

Version

1.0.2

License

ISC

Unpacked Size

6.23 kB

Total Files

4

Last publish

Collaborators

  • namebuhong