Twitter bootstrap - 탭이있는 탐색에 애니메이션/전환 효과 추가

Question

저는 부트 스트랩 사이트의 예제를 사용하여 기본 탭 탐색 기능을 제공합니다. 애니메이션 효과 (페이드 인 및 페이드 아웃)를 추가하면 각 탭을 클릭 할 때 새 내용이 희미 해집니다.

<!-- 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> 

Answer 1

트랜지션이 작동하려면 모든 탭 창에 클래스 "페이드"를 추가하고 활성 창에서 "클래스"클래스를 추가해야합니다.

주 (아래 코드는 부트 스트랩에서 예 전환을 포함하는 편집입니다) :이 코드는 V3를 들어 부트 스트랩 2에 대한 참조입니다 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> 

Answer 2

사용 history.pushState 또는 History.js 또는 https://github.com/browserstate/ajaxify

의이 프로세스가 보이는 것보다 꽤 복잡하고 더 많은 고급 과정은 실제로 떨어져 구축 할 수 있습니다.

내 사이트 http://cameronspear.com은 URL을 업데이트하고 멋진 슬라이드 효과로 전환하는 동안 콘텐츠의 AJAX에이 변형을 사용합니다.

더 간단한 대안으로, 모든 콘텐츠를 한 페이지에 넣고 각 섹션에 고유 ID와 공통 클래스를 부여한 다음 고유 ID 및 jQuery를 사용하여 nav의 링크를 숨기고 hide 다른 콘텐츠 영역 및 클릭 한 콘텐츠 영역을 보여줍니다. http://codepen.io/CWSpear/pen/naJzl

Answer 3

당신은 단순히 트위터 부트 스트랩의 공식 페이지 설명에 the example로 .tab-창 요소 fade 클래스를 제공해야합니다

다음은 그 간단한 샘플입니다.

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

bootstrap-transition.js을로드하는 것을 잊지 마십시오.