很多时候在做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的用户，不清楚的同学请自行查看文档哈哈哈）
那是不是可以:
- 在点击当前tap的时候给设置一个专门的类样式；
- 把这个类样式传入
wx.createSelectorQuery； - 返回的left值就是当前tap的left值；
- 把这个值赋给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;
}
