Twitter Bootstrap - 为选项卡导航添加动画/过渡效果

Question

Twitter Bootstrap - 为选项卡导航添加动画/过渡效果

4

我有一个基本的选项卡导航，使用了Bootstrap网站上的示例。我该如何添加动画效果（淡入淡出），使得每次点击选项卡时新内容都会淡入？

 <!--   i have a basic tabbed navigation using the example from the bootstrap site. how can i add an animation effect (fade in and out) so when each tab is clicked the new content is faded in? -->

    <div class="tabbable">
      <ul class="nav nav-tabs nav-stacked span3">
         <li class="active">
          <a href="#myDashboardNav" data-toggle="tab">
        <i class="icon-align-justify"></i>
        My dashboard 
        <span class="badge badge-important">20%</span>
            </a>

    </li>
    <li id="myfeed">
    <a href="#myFeedNav" data-toggle="tab">
    <i class="icon-list-alt"></i>
    My feed   
    <span class="badge badge-important">6</span>
    </a>
    </li>
    <li id="notifications">
    <a href="#notificationsNav" data-toggle="tab">
    <i class="icon-time"></i>
    Notifications <span class="badge badge-important">9</span>
    </a>
    </li>
    </ul>

    <div class="tab-content span8">
    <div class="tab-pane well active" id="myDashboardNav" style="height: 330px">Content1
    </div>
    <div class="tab-pane well" id="myFeedNav" style="height: 330px">Content2

    </div>

    <div class="tab-pane well" id="notificationsNav" style="height: 330px">Content3

    </div>

    </div>

    </div>

- GeV 126

你目前做了什么？发一下你尝试过的代码，我们会帮助你解决问题。 - jrd1

1

代码已发布...我只是使用Bootstrap Twitter网站的标签导航基本示例，我想单击每个选项卡时，不是切换到选项卡内容，而是淡入淡出。谢谢。 - GeV 126

3个回答

8

你只需给你的.tab-pane元素添加一个fade类，正如Twitter Bootstrap官方页面上的示例所解释的那样。

<div class="tab-pane active fade in" ...>

不要忘记加载 bootstrap-transition.js。

- baxang

这对我不起作用，我也需要它。我需要加载bootstrap-tabs吗？谢谢。 - bboy

1

对我来说完全正常。如果你想要选项卡，那么你需要加载选项卡。如果你想要转场效果，那么你需要加载转场效果。无论你需要什么，只需包含或默认包含所有内容，然后在完成网站构建后简单地删除不需要的JS即可。 - TechRemarker

0

使用history.pushState或History.js或基于https://github.com/browserstate/ajaxify构建

这个过程实际上比它看起来的要复杂和更高级。

我的网站http://cameronspear.com使用了这个的变体，可以在更新URL并具有漂亮的滑动效果的同时AJAX加载内容。

一个更简单的替代方案是将所有内容放在一个页面上，并为每个部分提供唯一的ID和共同的类，然后使导航中的链接对应于唯一的ID，并使用jQuery隐藏其他内容区域并显示被点击的内容区域。

这是一个简单的示例：http://codepen.io/CWSpear/pen/naJzl

- CWSpear

CWSspear，能否请您举个例子？ - GeV 126

用户询问如何在Twitter上实现此功能。Twitter已经内置了这个功能，他只需要像另一个用户所说的那样添加一些类，并包含随Twitter Bootstrap一起提供的转换和选项卡js即可。 - TechRemarker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Saneem · Accepted Answer

为了实现过渡效果，所有选项卡面板都应该添加"class = fade"类，活动面板上应该添加"class = in"类。(下面的代码是Bootstrap的一个示例，已编辑以包括过渡效果)

注意: 这段代码适用于Bootstrap 2。有关v3的信息，请参阅docs。

<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#home">Home</a></li>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#messages">Messages</a></li>
  <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active fade in" id="home">...</div>
  <div class="tab-pane fade" id="profile">...</div>
  <div class="tab-pane fade" id="messages">...</div>
  <div class="tab-pane fade" id="settings">...</div>
</div>

<script>
$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})
</script>