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

---

  喜欢本文的小伙伴们,欢迎关注个人订阅号超爱敲代码,查看更多内容.