用 Animsition 製作閃動網站特效記錄
好久沒有特地拆網站特效來看了，最近剛好看到幾個動畫官網的切頁效果做得不錯，畫面在切換時會有一層滑動覆蓋過去，再接著把新頁面帶進來，整體感覺比單純淡入淡出更有記憶點。
特效效果
原本我是想直接拆這個效果怎麼做，結果查一查才發現，這類轉場其實已經有人包成現成套件了，就是 Animsition。
Animsition 是什麼
Animsition 是一個專門拿來做頁面轉場效果的套件。它的定位很明確，不是在解決整個前端框架問題，而是幫你快速做出切頁動畫，像是淡入、淡出、滑入、覆蓋式切換這些常見效果。
它比較適合：
- 傳統多頁式網站。
- 活動頁、展示頁、動畫官網。
- 想快速做出切頁視覺效果的情境。
如果你的需求只是「頁面切換時不要太硬」，這種套件其實比自己從零刻一套流程快很多。
基本用法
這類套件通常會搭配特定 class 使用，例如：
|
|
這段的重點在於兩件事：
animation-duration控制動畫時間。animsition-overlay-slide、overlay-slide-in-bottom這類 class 決定轉場樣式。
也就是說，你不需要自己從頭設計整個切頁動畫原理，而是直接套用它提供的 class 和初始化方式即可。
當時查到的套件與相關資源在這裡：
為什麼它方便
這類套件最方便的地方，不是動畫本身有多炫，而是它已經把常見的切頁流程整理好了。你不用自己處理：
- 點連結後什麼時候開始播放離場動畫。
- 新頁面什麼時候進場。
- 動畫 class 怎麼切換。
對只想快速做出視覺效果的人來說，這比純手刻省事很多。
什麼時候適合用
如果你的網站本來就偏展示型、作品集型、品牌形象頁或活動頁，這類切頁特效很容易讓整體感變得更完整。不過如果是資料密集、操作密集的後台系統，切換太多動畫反而會讓人覺得拖。
要注意什麼
1. 套件方便，但不要濫用
這類效果通常比較適合用在少量頁面切換，或視覺導向明確的網站。如果整站每個地方都在滑、都在蓋版，使用者反而會累。
2. 動畫時間不要太長
動畫做得漂亮是一回事，但如果每次切頁都等太久，使用者體感會很差。通常適度就好。
3. 留意行動裝置效能
某些動畫在桌機看起來順，但在手機上不一定一樣流暢，這點最好實機測。
4. 現成套件不代表不用懂結構
雖然是套件，但還是要知道哪些元素負責覆蓋層、哪些 class 控制方向，這樣之後你要微調才不會完全無從下手。
延伸參考
原文當時還有看到一個 jsfiddle 展示：
|
|
如果要快速理解這類特效怎麼組起來，直接看可執行展示通常會比只看文件更快。
小結
這篇的重點其實不是 jQuery，而是我原本在拆網站特效時，意外發現 Animsition 這種已經包好的頁面轉場套件。對於想快速做出動畫官網、活動頁、展示頁效果的人來說，它是很直觀的起點。至少在概念驗證階段，比自己從零開始刻切頁動畫要省事很多。