web-dev-qa-db-ja.com

2つのBootstrap 3タブ間でスライドアニメーションを実行するにはどうすればよいですか？

2つのBootstrap 3タブ間で左、右、上、下にスライドする方法を理解しようとしています。
ウェブを検索しましたが、驚くべきことに何も見つかりませんでした。
私が見つけた最も近いものは、Bootstrap githubの [〜＃〜] this [〜＃〜] でした。ただし、Bootstrap 2.0.2を処理し、Bootstrap 3では機能しなくなりました。

2つのBootstrap 3タブ間で左、右、上（いずれかまたはすべて）にスライドする方法を知っている人はいますか？

これが私が使用している基本的なBootstrap 3タブのセットアップです。

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

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home"> home page content </div>
  <div class="tab-pane" id="profile"> profile page content </div>
  <div class="tab-pane" id="messages">message page content </div>
  <div class="tab-pane" id="settings">settings content</div>
</div>

これらのいくつかの方法のいずれかでタブをアクティブにします。

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab a:first').tab('show') // Select first tab
$('#myTab a:last').tab('show') // Select last tab
$('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)

「表示」を行うときにページを切り替えるのではなく、新しいタブを同時にスライドさせながら、古いタブを左または右に「スライド」させたいと思います。古いタブを最初に完全にスライドさせなければならなかったとしても、新しいタブをスライドさせてもかまいません。しかし、私は前者の方が好きです。

jquerytwitter-bootstraptabstwitter-bootstrap-3css-animations
9
fat fantasma

前回のプロジェクトで使用したより良い方法があります。その Animate.css

  1. 非常に簡単
  2. その他の効果

JavaScript

function leftSlide(tab){
   $(tab).addClass('animated slideInLeft');
}

function rightSlide(tab){
   $(tab).addClass('animated slideInRight');   
}

$('li[data-toggle="tab"]').on('shown.bs.tab', function (e) {  
    var url = new String(e.target);
    var pieces = url.split('#');
    var seq=$(this).children('a').attr('data-seq');
    var tab=$(this).children('a').attr('href');
    if (pieces[1] == "profile"){       
     leftSlide(tab);        
    }
})
11
Hardik Gajjar

これが実際の例です：

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

                if($new_tab.index() < $old_tab.index()){
                        $old_tab.css('position', 'relative').css("right", "0").show();
                        $old_tab.animate({"right":"-100%"}, 300, function () {
                                $old_tab.css("right", 0).removeAttr("style");
                        });
                }
                else {
                        $old_tab.css('position', 'relative').css("left", "0").show();
                        $old_tab.animate({"left":"-100%"}, 300, function () {
                                $old_tab.css("left", 0).removeAttr("style");
                        });
                }
        });

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

                if($new_tab.index() > $old_tab.index()){
                        $new_tab.css('position', 'relative').css("right", "-2500px");
                        $new_tab.animate({"right":"0"}, 500);
                }
                else {
                        $new_tab.css('position', 'relative').css("left", "-2500px");
                        $new_tab.animate({"left":"0"}, 500);
                }
        });

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                // your code on active tab shown
        });
.tabs-animated {
  overflow: hidden;
}

.tab-pane {
  height: 250px;
  width: 100%;
}

#tab1 {
  background: #dddddd;
}

#tab2 {
  background: #cccccc;
}

#tab3 {
  background: #bbbbbb;
}

#tab4 {
  background: #aaaaaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tabs-animated">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Tab 1</a></li>
    <li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Tab 2</a></li>
    <li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Tab 3</a></li>
    <li role="presentation"><a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">Tab 4</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="tab1">Tab 1</div>
    <div role="tabpanel" class="tab-pane fade" id="tab2">Tab 2</div>
    <div role="tabpanel" class="tab-pane fade" id="tab3">Tab 3</div>
    <div role="tabpanel" class="tab-pane fade" id="tab4">Tab 4</div>
  </div>

</div>
5
Arthur Shlain

this を達成したいかどうかは正確にはわかりませんが、そうであれば、私が使用したコードは here 以下です。

HTML：

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

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane fade active in" id="home">This is the home page content </div>
  <div class="tab-pane fade" id="profile">This is the profile page content </div>
  <div class="tab-pane fade" id="messages">This is the message page content </div>
  <div class="tab-pane fade" id="settings">This is the settings content</div>
</div>

JavaScript

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {  
    var url = new String(e.target);
    var pieces = url.split('#');

    if (pieces[1] == 'profile'){
        $('#profile').css('left','-'+$(window).width()+'px');    
        var left = $('#profile').offset().left;
        $("#profile").css({left:left}).animate({"left":"0px"}, "10");
    }

    if (pieces[1] == 'home'){
        $('#home').css('right','-'+$(window).width()+'px');    
        var right = $('#home').offset().right;
        $("#home").css({right:right}).animate({"right":"0px"}, "10");
    }

    if (pieces[1] == 'messages'){
        $('#messages').css('top','-'+$(window).height()+'px');            
        var top = $('#messages').offset().top;
        $("#messages").css({top:top}).animate({"top":"0px"}, "10");
    }

    if (pieces[1] == 'settings'){
        $('#settings').css('bottom','-'+$(window).height()+'px');            
        var bottom = $('#settings').offset().bottom;
        $("#settings").css({bottom:bottom}).animate({"bottom":"0px"}, "10");
    }
})

CSS

#home, #profile, #messages, #settings {    
    position: relative;
}

body {
    overflow: hidden;
}
1
paulalexandru