小程序 纯css 实现tab导航栏下划线跟随动画

很多时候在做tab导航的点击时我们都会要上一个过渡的动画，不然的话会显得生硬，用户没有达到比较佳的用户体验。如下图：
在开发者工具中预览效果

t3fyo-a07nj.gif

我们可以用两种方法实现这样动画，css3的过渡或者用js去控制。省事的当然是用css3来写啦，我们先来看看css3的具体实现。

css3实现：

先看最基本的.wxml布局：

image.png

从图中可以看到，当前tap的line是用专门用一个元素来做的。那么怎么让line跟着tab走动呢？就是红圈部分，用translateX位移来移动，而transitions实现一个过渡效果。
curtab就是当前点击tab的index，点击的tab的index * 250(一个tab的宽度)就能让line跟着走对应的位移了。
来看看.js部分:

tabHandle(e) {
    this.setData({
      curtab: e.currentTarget.id,
    })
}

这样就能简单实现一个tab跟随动画啦。
(以上方法有个不足，就是tab的宽度是固定的，但是在实际开发中更多时候会遇到宽度不固定的情况。)

js实现：

有些喜欢折腾的同学说想要js来实现呢？当然也是可以的，用js来实现的思路也是一样，用控制line元素的translateX值。那么怎么知道应为位移多少呢？就是动态的去获取该位移的值，然后赋给translateX。

说到动态的去获取元素额left值，可以用到小程序的wx.createSelectorQuery这个api在传入元素后返回元素的四个位移值。（这里不细说api的用户，不清楚的同学请自行查看文档哈哈哈）

那是不是可以:

1. 在点击当前tap的时候给设置一个专门的类样式；
2. 把这个类样式传入wx.createSelectorQuery；
3. 返回的left值就是当前tap的left值；
4. 把这个值赋给translateX，line跟着位移相应的left值。

来看看具体的实现：

image.png

上图可以看到，如果是当前tab，我们给他多加了一个 .blod样式。来看看js的动画：

image.png

把当前tab特有的 .blod在 wx.createSelectorQuery获得他的left值，也就是当前line该移动的left值。
而 wx.createAnimation的用户就是：创建一个对象，给这个对象赋值一个动画，再导出该动画，然后在wxml用animate属性来承接这个动画。
js动画实现填补了css实现tab宽度必须是固定值得问题。具体用哪种当然是看业务需求具体分析啦。

emmm最后说一下，前端时间看到过一个很骚的操作，同样是用纯css实现这种跟随动画，先看看效果图：

image

具体解析看这里：
不可思议的纯CSS导航栏下划线跟随效果
fork下代码：
.html

ul
  li 不可思议的CSS
  li 导航栏
  li 光标下划线跟随
  li PURE CSS
  li Coco

.css

ul {
    display: flex;
    position: absolute;
    width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

li {
    position: relative;
    padding: 20px;
    font-size: 24px;
    color: #000;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer;
}

li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}

li:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #000;
    z-index: -1;
}

li:hover ~ li::before {
    left: 0;
}

li:active {
    background: #000;
    color: #fff;
}