让tab导航在手机移动端有平滑滑动的效果

这种tab左右切换，使样式有左右滑动效果

html代码如下

<ul class="ui-tab-nav ui-tab-nav-three ui-border-b c0">
<li class="current" rel="launch">我发起的</li>
<li class="" rel="partake">我参与的</li>
<li class="" rel="like">我喜欢的</li>
</ul>

这里使用的是frozenui的tab方法，我需要在ul上加上类名以知道当前在那个菜单上，附上js

var tab = new fz.Scroll('.ui-tab', {
role: 'tab',
});
tab.on('beforeScrollStart', function(from, to) {
$(".ui-tab-nav").removeClass("c"+from);
$(".ui-tab-nav").addClass("c"+to);
});

css样式代码，frozenui的样式不写了，写上默认的，我用的时候默认tab是两个，所以当3个的时候另外加了一个类名

ui-tab-nav-three

.ui-tab-nav:after{
content: "";
width: 50%;
height: 2px;
background: @common-color-red;
display: block;
overflow: hidden;
position: absolute;
left: 0;
bottom:0;
-webkit-transition: -webkit-transform 0.2s ease-out;
}
.ui-tab-nav.ui-tab-nav-three:after{width:33.33%;}
.ui-tab-nav.c0:after{-webkit-transform: translate(0,0);}
.ui-tab-nav.c1:after{-webkit-transform: translate(100%,0);}
.ui-tab-nav.ui-tab-nav-three.c2:after{-webkit-transform: translate(200%,0);}