iSwitch 使用了 CSS3 3D 設置, 完整呈現了 iOS app 間切換效果, 要呈現該效果其實有很多種做法, 最普通的就是動態更改 element x/y, width/height, 不過模擬出來的相當有限, 當然有了 CSS3 之後, 自然就是讓 element 藉由景深的變化以及讓它繞著圓周旋轉, 便可完美重現.

此外, 本 module 更是在 origin 玩了點花樣, 使其不需要重覆運算著 XAxis 以及 ZAxis, 大大減少效能的損耗. 使用 webkit based 的瀏覽器, 更可以藉由相片下方的調整 bar 進行 YAxis 的調整, 方便觀看其圓周運動. 除了基本的 autoplay 支援外, 滑鼠滾軸, 拖曳以及點擊的操作已經是最基本的支援囉!

由於本 module css 設置使用了 > 以及 nth-child 相互搭配, 因此在 CSS 優先序上有遇到了一些挫折, 在開發 module 前最好能先對相關的設置做一些測試, 避免增加 debug 的時間.

歡迎點擊下方連結, 前往觀看喔^^
iSwitch
iSwitch(垂直模式)

需求: webkit 核心的瀏覽器, firefox

使用方法:
可以對頁面元素進行 "點擊", "拖曳", "滑鼠滾輪" 進行翻轉的動作, 亦可藉由設定 element 為 trigger 來驅動

JavaScript:

new iSwitch('Hako',
   {
        wrapper:'Hako',
        irp:0,
        coolTime:'5s',
        dragAble:true,
        isHori:false,
        isAuto:true
    }
);

參數解釋:
wrapper: 設定 wrapper, 可以是 id 或 DOM element, 即縮圖的 element
irp: 設定一開始欲呈現的 element order
coolTime: autoplay 有設定時, 每次切換的停留時間, 可以為 1s 或者 1000ms, default 為 1s
dragAble: 設定是否可以進行拖曳切換, default 為 true, 若設定 false, 則 autoplay 亦會被關閉
isAuto: 設定是否自動播放, default 為 true
isHori: 設定水平或者垂直模式, default 為 true

搭配 metod: goTrans(), 亦可進行旋轉的動作

※ 也可自行於 demo 網址增加 GET parameter 來觀看其他呈現, 目前開放 isHori.

Highlight:

1. create CSS by js
2. transition animation
3. translate3d
4. user-select:none (CSS3)
5. transform-origin

※ 小技巧分享 - transform-origin:
CSS3: transform-origin 主要設置 transform 的原點, 它可以接受數值或者是 %, 沒有設置的話則默認該 element 的寬高中線的交叉點, 即 element 的最中心位置, 也可以用 50% 50% 表示

那麼 origin 可以設置在 element 以外的位置嗎? 答案是肯定的, 他的作用範圍並不僅局限於 element 的寬高內, 如果設置 % 的話, 則第一個參數是相對於 element 的 width, 第二個參數是相對於 element 的 height.

結合以上兩點, 我們便可以做出 responsive 的設定ex: -webkit-transform-origin:250% 50%;

這表示該 origin 設置的 X 位置是 element 往左 2.5 * width, Y 的位置是 0.5 * height, 即...................(2.5*width, 0.5*height)

※ 使用 CSS 3D & Animation 注意事項

1. 別人的小孩死不完, 所以請直接施展必殺技 - transform:translate3d(0,0,0); 開啟硬體加速

2. perspective 屬性直接放在 wrap 就好, 千萬不要每個 element 都加, 不然會七彩霓虹燈轉不出個所以然的

3. 欲使用 3d 屬性的 element, 請記得賦予它 transform-style:preserve-3d
   儘量使用 classname 的增減來附加 animation, 使用 inline style 變化雖然方便 debug, 但會很不好控管

4. Safari 中 element 具有 transform 屬性者, 別想藉由 z-index 的變化就能壓過它

5. Chrome 中非當前做用視窗, 則 transition 的動作會被 freeze 住, 但無法 freeze transition-delay, 所以內部時間軸仍會繼續流動

6. 在滿足特定條件下, element CSS 屬性 visibility:hidden 有機會無法 hidden 其 children 經由 CSS 3d 跑出 element 範圍的部分, 比方說 children 被賦予了 transform-origin:0% 0%; transform:rotateY(120deg); (不過我已經忘了如何重建特定條件現場)

7. 若使用 2D matrix 屬性來設置, 則 0deg ~ 360deg 這樣的設定是不會旋轉的, 因為兩者皆是 matrix(1,0,0,1,0,0), 所以transition 會認為屬性相同, 不需要做變化, 因此要自己寫額外處理

8. 若想暫時關閉 transition (transition-property:none;)來做額外的屬性附加, 請給予它些許的時間差再還原其能力, 馬上掛回去有可能其 child element 尚未完成屬性附加, 然後出現無法預期的變化
   ex:

   this.wrapper.addClassName('noneani');
   this.wrapper.select('>div>div').each(
   function(n){
   n.addClassName('prepare');
   }
   );
   this.wrapper.removeClassName('noneani');