Velocity.js UI 效果列表

Velocity.js UI(下载地址) 是一套很优秀的动画预设插件,主要分为 callouttransition 两类,调用方法(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 类)

你可能感兴趣的:(Velocity.js UI 效果列表)