flipjs

开源

用于执行 FLIP 动画的辅助库。

1.4K stars0 点赞1 次浏览

工具介绍

用于执行 FLIP 动画的辅助库。

FLIP.js

一个用于 FLIP 动画的辅助库。 FLIP 是一种动画方法,它将昂贵的属性(如宽度、高度、左边和上边)重新映射为使用变换的显著便宜的变化。它通过获取元素的第一位置(F)和最后位置(L)的两个快照来实现此操作。然后,它使用一个变换来反转 (I) 元素的变化,使元素看起来仍然处于第一位置。最后,它通过删除在反转步骤中应用的变换来播放 (P) 动画。

使用方法

您可以单独使用 FLIP 助手,如下所示:

javascript

let flip = new FLIP({
  element: target,
  duration: 2000
});

// First position & opacity.
flip.first();

// Apply the 'end' class and snapshot the last position & opacity.
flip.last('end');

// Move and fade the element back to the original position.
flip.invert();

// Play it forwards.
flip.play();