Velocity.js UI 效果列表

Velocity.js UI（下载地址） 是一套很优秀的动画预设插件，主要分为 callout 和 transition 两类，调用方法（without jQuery）如下：

// import velocity.min.js
// import velocity.ui.min.js
const Elem = document.getElementById('content')
Velocity(Elem, 'callout.swing')

上面的 callout.swing 可替换成下面列表的任一值

  • callout 类
    • bounce
    • shake
    • flash
    • pulse
    • swing
    • tada
  • transition 类 - In 和 Out 成对
    • fade + [ In | Out ]
    • flip + [ X | Y ] + [ In | Out ]
    • flipBounce + [ X | Y ] + [ In | Out ]
    • swoop + [ In | Out ]
    • whirl + [ In | Out ]
    • shrink + [ In | Out ]
    • expand + [ In | Out ]
    • bounce + [ In | Out ]
    • bounce + [ Up | Down | Left | Right ] + [ In | Out ]
    • slide + [ Up | Down | Left | Right ] + [ In | Out ]
    • perspective + [ Up | Down | Left | Right ] + [ In | Out ]

最后放一个 Demo 供大家参考下动画效果（仅 transition 类）

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容