FLIP animation helper; animate DOM changes with ease

FlippyJS

FlippyJS is a helper library for FLIP animations - it allows you to easily animate any changes you make to the DOM, without having to specify the animation manually. All animations are done using CSS animations.

It is exported as a UMD library, supporting both AMD, CommonJS and basic <script> usage.

Usage

Flippy.js exposes the function flip(elements, modifier, [options]). Pass it the elements you want to animate, a function which should modify the DOM when called, and an optional options object. It returns a Promise which resolves when the animation is finished.

For specifics, see our docs.

Here's a quick example:

-- -------------------- ---- -------
--- --------- - --------------------------------------------------
-----
  ---------------- -- --- -------- -- -------
  ----- -- ------ ---- -- ------ ---- --- --- ------
    -----------------------
      -----------------------
      --------------------
    --
  -
------------
  ---------------------- -----------
---

-------- ---------------------- - -- --- -- -

Advanced usage

Internally, FlippyJS uses a FLIPElement class to represent elements that are being animated. This class is exposed as flip.FLIPElement, should you wish to play around with it.

More details at our docs.

HomePage

https://birjolaxew.github.io/flippy.js

Repository

git+https://github.com/birjolaxew/flippy.js.git

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005605a81e8991b448de7ed