很多时候在做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
<style type="text/css"><!--
*{padding:0margin:0}
img{border:0display:block}
BODY {
PADDING-RIGHT: 0pxPADDING-LEFT: 0pxFONT-SIZE: 12pxPADDING-BOTTOM: 0pxMARGIN: 0px autoCOLOR: blackLINE-HEIGHT: 150%PADDING-TOP: 10pxBACKGROUND-COLOR: whiteTEXT-ALIGN: center
}
.dis {
DISPLAY: block
}
.undis {
DISPLAY: none
}
#cntR {
WIDTH: 302px
}
#NewsTop {
CLEAR: bothMARGIN-BOTTOM: 16px
}
#NewsTop P {
FLOAT: leftLINE-HEIGHT: 21px
}
#NewsTop P.topTit {
FONT-WEIGHT: boldWIDTH: 117px
}
#NewsTop P.topC0 {
BACKGROUND: #dcdcdcBORDER-LEFT: #f2f2f2 1px solidWIDTH: 40pxCURSOR: pointer
}
#NewsTop P.topC1 {
BACKGROUND: #c2130eBORDER-LEFT: #f2f2f2 1px solidWIDTH: 40pxCOLOR: #fff
}
#NewsTop #NewsTop_tit {
BORDER-BOTTOM: #c2130e 3px solidHEIGHT: 21px
}
#NewsTop #NewsTop_cnt {
PADDING-LEFT: 32pxBACKGROUND: url(http://www.popuni.com/attachments/month_0703/o2007320133249.gif) no-repeat 12px 13pxLINE-HEIGHT: 26pxPADDING-TOP: 7pxHEIGHT: 260pxTEXT-ALIGN: left
}
#NewsTop #NewsTop_cnt A {
COLOR: #666TEXT-DECORATION: none
}
#NewsTop #NewsTop_cnt A:hover {
COLOR: #c2130eTEXT-DECORATION: underline
}
-->
</style>
<DIV id="cntR" style="float:leftdisplay:blockclear:both">
<DIV id="NewsTop">
<DIV id="NewsTop_tit">
<P class="topTit">新闻排行</P>
<P class="topC0">国内</P>
<P class="topC0">国际</P>
<P class="topC0">社会</P>
<P class="topC0">网评</P>
</DIV>
<DIV id="NewsTop_cnt">
<SPAN title="Don't delete me"></SPAN>
<SPAN>
<A href="#" target=_self>新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
<SPAN>
<A href="#" target=_self>美华裔女兵在营房上吊死亡军方介入调查(图)</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
<SPAN>
<A href="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
<SPAN>
<A href="#" target=_self>铁道部回应吴敬琏质疑:春运不涨价将长期坚持</A><BR>
<div align="right"><A href="#" target=_self>...more</A></div>
</SPAN>
</DIV>
<SCRIPT>
var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p')
var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span')
var len=Tags.length
var flag=1//修改默认值
for(i=1i<leni++){
Tags[i].value = i
Tags[i].onmouseover=function(){changeNav(this.value)}
TagsCnt[i].className='undis'
}
Tags[flag].className='topC1'
TagsCnt[flag].className='dis'
function changeNav(v){
Tags[flag].className='topC0'
TagsCnt[flag].className='undis'
flag=v
Tags[v].className='topC1'
TagsCnt[v].className='dis'
}
</SCRIPT>
</DIV>
</DIV>
Tab菜单比较简单的方法是直接使用dreamweaver cs3的spry制作,其他方法制作难度比较大，不管哪种方法，必须要使用javascript调用。
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">选项卡 1</label>
<div id="tab-content1" class="tab-content">
<p>选项卡内容 1</p>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2" />
<label for="tab2">选项卡 2</label>
<div id="tab-content2" class="tab-content">
<p>选项卡内容 2</p>
</div>
</li>
</ul>
