Bootstrap Tab Pane幻灯片效果

Question

好的，非常不言自明，但我无法弄清楚它是如何完成的，我也找不到任何资源......

我有tab-pane的简单列表，如：

  tab-pane fade in active

但我不需要fade过渡。但是slide，最好是从右边开始。有这样的事吗？我该怎么办？

Answer 1

我创建了那个小js函数：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {    
    var target = $(this).attr('href');

    $(target).css('left','-'+$(window).width()+'px');   
    var left = $(target).offset().left;
    $(target).css({left:left}).animate({"left":"0px"}, "10");
})

您只需将此小CSS添加到标准Bootstrap中，标准HTML标记保持不变：

.tab-content .tab-pane {    
    position: relative;
}

看看这个bootply，看看它是不是你想要的。

BOOTPLY