在進(jìn)行咖蜜兒項目中的渣渣雞炸雞頁面時，為了實現(xiàn)滾動屏幕時能夠添加動畫效果，使用了Amaze UI JS 插件中的滾動偵測(ScrollSpy),當(dāng)屏幕滾動到一定區(qū)域加載并添加動畫效果。
一、滾動偵測使用方法
1.加載amazeui.js文件
2.html中使用：使用Data API調(diào)用，此方法相比較js調(diào)用來說比較簡單實現(xiàn)
data-am-scrollspy 屬性：
{animation:'fade'} 動畫類名，其他的動畫類見下方
{animation:'fade', delay: 300} 延遲動畫執(zhí)行時間（ms），默認(rèn)為 0 {animation:'fade', repeat: false} 是否重復(fù)動畫，默認(rèn)為 true
3.amaze動畫效果庫(.am-animation-reverse class，讓動畫反向運行)
| Class | 描述 |
|---|---|
.am-animation-fade | 淡入 |
.am-animation-scale-up | 逐漸放大 |
.am-animation-scale-down | 逐漸縮小 |
.am-animation-slide-top | 頂部滑入 |
.am-animation-slide-bottom | 底部滑入 |
.am-animation-slide-left | 左側(cè)滑入 |
.am-animation-slide-right | 右側(cè)滑入 |
.am-animation-shake | 左右搖動 |
.am-animation-spin | 無限旋轉(zhuǎn) |
上一篇： AJAX
