讓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);}