twitter-bootstrap Bootstrap Tab Pane 幻灯片效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25719382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Tab Pane slide effect
提问by Dr.Kameleon
OK, pretty self-explanatory but I cannot figure how it's done, nor can I find any resources...
好的，不言自明，但我无法弄清楚它是如何完成的，也找不到任何资源......
I have simple list of tab-panes like :
我有简单的tab-panes列表，例如：
tab-pane fade in active
But I do not need a fadetransition. But a slideone, instead, preferably from the right. Is there such a thing? How can I do it?
但我不需要fade过渡。但是slide一个，相反，最好是从右边。有这样的事情吗？我该怎么做？
回答by Sebsemillia
I created that little js function:
我创建了那个小 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");
})
You just have to add this small CSS to the standard Bootstrap, the standard HTML markup stays the same:
您只需要将这个小 CSS 添加到标准 Bootstrap 中，标准 HTML 标记保持不变：
.tab-content .tab-pane {
position: relative;
}
Take a look at this bootply to see if it is what you want.
看看这个 bootply，看看它是否是你想要的。
