如何在两个Bootstrap 3选项卡之间制作幻灯片动画? [英] How to do a slide animation between two Bootstrap 3 tabs?

问题描述

我正在尝试找出如何在两个Bootstrap 3标签之间向左，向右，向上，向下滑动.
我已经在网上搜索了，却惊讶地没有找到任何内容.
我发现的东西是在Bootstrap github上的 THIS .但是，它处理的是Bootstrap 2.0.2，并且不再适用于Bootstrap 3.

I'm trying to figure out how to do a slide left, right, up, down between two Bootstrap 3 tabs.
I have searched the web and surprisingly have not found anything.
The closest thing I found was THIS on Bootstrap github. However, it deals with Bootstrap 2.0.2 and no longer works for Bootstrap 3.

有人知道如何在两个Bootstrap 3选项卡之间向左，向右，向上(任何或全部)向下滑动吗?

Does anybody know how to slide left, right, up down (any or all) between two Bootstrap 3 tabs?

这是我正在使用的基本Bootstrap 3选项卡设置.

Here is the basic Bootstrap 3 tab setup that I am using.

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

我可以通过以下几种方式之一激活我的标签页.

I activate my tabs in one of these several ways.

$('#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)

我不想在执行显示"时仅切换页面，而是想在同时滑动新选项卡的同时向左或向右滑动"旧选项卡.即使旧的标签页必须先滑到最下面，然后再滑动新的标签页也是可以接受的.但是，我更喜欢前者.

Instead of just switching pages when I do a 'show' I would like to 'slide' the old tab off to the left or right while sliding in the new tab at the same time. Even if the old tab had to slide all the way off first then slide the new tab would be acceptable. However, I prefer the former.

推荐答案

在上一个项目中有更好的方法.其 Animate.css

There is better way I have used in my last project. Its 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);        
    }
})

这篇关于如何在两个Bootstrap 3选项卡之间制作幻灯片动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！