Bootstrap选项卡窗格幻灯片效果 [英] Bootstrap Tab Pane slide effect

问题描述

好的，不言而喻，但我不知道它是如何完成的，我也找不到任何资源...

我有简单的<$ c $

 选项卡窗格淡入活动
  / code> 

但我不需要 fade 转换。但是滑动一个，而最好从右边开始。有这样的事吗？我怎么做到的？

解决方案

我创建了那个小小的js函数：

on（'shown.bs.tab'，function（e）{
var target =[''）] $（'a [data-toggle =tab $（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，看看它是不是你想要的。 / p>

BOOTPLY

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-pane fade in active

But I do not need a fade transition. But a slide one, instead, preferably from the right. Is there such a thing? How can I do it?

解决方案

I created that little js function:

$('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:

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

Take a look at this bootply to see if it is what you want.

BOOTPLY

这篇关于Bootstrap选项卡窗格幻灯片效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！