本篇实现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
喜欢本文的小伙伴们,欢迎关注我的订阅号超爱敲代码,查看更多内容.
