JS 的平凡之路--學習人氣眼中的效果（下）

本篇實現tab切換的效果,主要介紹CSS動畫的一些注意點。

1、簡介

  先看一下效果圖：

  實現這個效果，咱們得理解兩個方面的知識點：

• 移動端滑動場景的處理；

• CSS動畫實現的一些注意事項。

2、移動端滑動

  對於web原生的滑動，當內容的尺寸大於容器尺寸的時候結合overflow屬性就能夠出現漂亮的滾動條了，而後咱們能夠監聽scroll事件。可是在移動端，太多的狀況下可能並不能知足咱們的需求。

  這裏我推薦兩個比較好的庫：

• AlloyTouch.js和transform.js結合使用，傳送門；

• better-scroll.js，傳送門;

  值得慶幸的是，better-scroll.js的做者就在兩天前，重構了代碼，並給了文檔和例子。

  而better-scroll.js實現的核心主要是：

• 監聽touchstart事件，調用_start方法，初始化運動參數；

• 監聽touchmove事件，調用_move方法，判斷是否爲標準的滑動，經過transform中的translate實現滑動；

• 監聽touchend事件，調用_end方法，添加慣性滑動。

3、CSS實現動畫的注意點

  若是你一名英雄聯盟選手，相信你對FPS很敏感，若是FPS低於60，那團戰一打起來就像播放幻燈片同樣。咱們的動畫也同樣，只有當幀率大於60時，動畫纔會顯得很天然。

  爲了讓動畫更加順暢，咱們必須避免沒必要要的Reflow和Repaint，採用代價最小的Composite（渲染層合併）。

  什麼才能觸發渲染層合併？那就是咱們的transform和opacity屬性。固然進入CSS3的時代，它一樣提供了一個will-change屬性，讓你告訴瀏覽器這個元素要發生改變，瀏覽器提早作好複雜的工做，從而提升響應的速度。這裏咱們從上面這個動畫效果來學習。

  咱們先看一下DOM結構：（這裏語義化不規範，須要批評）

better-scroll(class="tap", :list="sub", :scroll-x="scrollX", :listenScroll="listenScroll", :page="page")
        ul(class="content" slot="content", :class="type === 1 ? '' : 'simple-text'")
            li(v-for="(item, index) in sub", :key="index", :class="selectIndex === index ? 'active' : ''" @click="select(index,$event)")
                div.des
                    p.title    {{item.title}}
                    p.sub    {{item.sub}}
                div.icon
複製代碼

  動畫的實現主要經過opacity和transform改變元素先後狀態，對於須要變化的元素聲明will-change屬性，使用transition進行過渡，最後進行類名切換達到動畫效果。

/* 變化前 */
    .sub {
        @include font-size(10px);
        transition: opacity 300ms ease-in-out;
        will-change: opacity; 
    }
    
    /* 變化後 */
    .sub {
        opacity: 0;
    }
複製代碼

4、總結

  本節內容很少，主要總結爲：

• 移動端滾動能夠選擇alloyTouch或者better-scroll，後者文檔比較全，並且是採用Vue寫的例子；
• 在實現動畫方面，優先考慮從transform和opacity屬性着手，使用will-change優化；

參考文章：Performant Web Animations and Interactions: Achieving 60 FPS

---

  喜歡本文的小夥伴們,歡迎關注個人訂閱號超愛敲代碼,查看更多內容.