很多时候在做tab导航的点击时我们都会要上一个过渡的动画，不然的话会显得生硬，用户没有达到比较佳的用户体验。如下图：
在开发者工具中预览效果
我们可以用两种方法实现这样动画，css3的过渡或者用js去控制。省事的当然是用css3来写啦，我们先来看看css3的具体实现。
css3实现：
先看最基本的.wxml布局：
从图中可以看到，当前tap的line是用专门用一个元素来做的。那么怎么让line跟着tab走动呢？就是红圈部分，用translateX位移来移动，而transitions实现一个过渡效果。
curtab就是当前点击tab的index，点击的tab的index * 250(一个tab的宽度)就能让line跟着走对应的位移了。
来看看.js部分:
这样就能简单实现一个tab跟随动画啦。
(以上方法有个不足，就是tab的宽度是固定的，但是在实际开发中更多时候会遇到宽度不固定的情况。)
js实现：
有些喜欢折腾的同学说想要js来实现呢？当然也是可以的，用js来实现的思路也是一样，用控制line元素的translateX值。那么怎么知道应为位移多少呢？就是动态的去获取该位移的值，然后赋给translateX。
说到动态的去获取元素额left值，可以用到小程序的 wx.createSelectorQuery 这个api在传入元素后返回元素的四个位移值。（这里不细说api的用户，不清楚的同学请自行查看文档哈哈哈）
那是不是可以:
来看看具体的实现：
emmm最后说一下，前端时间看到过一个很骚的操作，同样是用纯css实现这种跟随动画，先看看效果图：
.css
一、 head里添加meta移动端的样式<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<div class="nav">
<!--汉堡logo menu--> <label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<a href="#">Business</a>
<a href="#">Service</a>
<a href="#">Learn more</a>
<a href="#"><span>Free Trial</span></a>
</div></div>
这个汉堡包menu菜单样子其实有代码实现的 "☰" 而且是作为字体显示的，可以直接用font-size直接调整大小
二、css样式 -通用
body{
width: 100%
height: 100%
margin:0 //浏览器默认的body的margin是8px由浏览器的user-agent-stylesheet提供的。所以我们直接覆盖默认就可以了，
}
html{
font-family:'helvetica neue',sans-serif //可以写很多种字体样式，意思是浏览器自己一个个识别，前一个没有就看后一个，一直往后找，直到找到可以用的
}.nav{
float: right
text-align: right
height: 70px
line-height: 70px
border-bottom: 1px solid #eaeaea
}
label{
display: none
}
#toggle{
display:none
}
.menu a{
margin: 0 10px
text-decoration: none
color: gray
}
.menu{
margin: 0 30px 0 0
}
.menu a span{
color:#54d17a
}
//添加@media样式：
@media only screen and (max-width: 500px) {
label{
display: block
cursor: pointer
width: 26px
float: right
}
.menu{
width: 100%
display: none
text-align: center
}
.menu a{
display: block
clear:right
}
#toggle:checked + .menu{ //这是个技术点
transition:all 0.4s ease-in
display: block
}
}
label用for绑定的input，自带了点击事件，点击了label的哪个汉堡logo,input就checked，这样就利用纯CSS实现了点击按钮下拉菜单出现的功能
