本篇實現tab切換的效果,主要介紹CSS動畫的一些注意點。
一、簡介
先看一下效果圖：
實現這個效果，我們得理解兩個方面的知識點：
-
移動端滑動場景的處理；
-
CSS動畫實現的一些注意事項。
二、移動端滑動
對於web原生的滑動，當內容的尺寸大於容器尺寸的時候結合overflow屬性就可以出現漂亮的滾動條了，然後我們可以監聽scroll事件。但是在移動端，太多的情況下可能並不能滿足我們的需求。
這裡我推薦兩個比較好的庫：
值得慶幸的是，better-scroll.js的作者就在兩天前，重構了程式碼，並給了文件和例子。
而better-scroll.js實現的核心主要是：
-
監聽touchstart事件，呼叫_start方法，初始化運動引數；
-
監聽touchmove事件，呼叫_move方法，判斷是否為標準的滑動，通過transform中的translate實現滑動；
-
監聽touchend事件，呼叫_end方法，新增慣性滑動。
三、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;
}
複製程式碼四、總結
本節內容不多，主要總結為：
- 移動端滾動可以選擇alloyTouch或者better-scroll，後者文件比較全，而且是採用Vue寫的例子；
- 在實現動畫方面，優先考慮從transform和opacity屬性著手，使用will-change優化；
參考文章：Performant Web Animations and Interactions: Achieving 60 FPS
喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.