javascript - 如何创建类似于Github的文件管理器的动画？

Question

我想向页面添加与 Github 文件管理器中相同的动画，当您浏览树时会出现该动画:框横向滑动，为另一个框腾出空间。

当前结构是(简化):

<div class="tabs">
  <ul>
    <li><a href="#foo" class="selected">Foo</a></li>
    <li><a href="#etc">Etc 1</a></li>
    <li><a href="#bla">Bla bla</a></li>
    <li><a href="#fourth">Fourth tab</a></li>
  </ul>
</div>
<!-- Tabs content -->
<div class="content">
  <div id="#foo"></div>
  <div id="#etc"></div>
  <div id="#bla"></div>
  <div id="#fourth"></div>
</div>

因此，当一个选项卡被选中时，之前的选项卡内容应该像Github的文件管理器一样横向滑动，并为当前内容腾出空间。我没能从Github的代码中发现它，所以我在这里问。如果可能，这应该只需要 CSS，但 Javascript 解决方案已被广泛接受(仅当不需要动画库时)。

我想我可以使用 CSS 伪选择器 :target 来完成这项工作，但我还没有弄清楚动画部分。

Answer 1

解决方案
不需要使用超时，我发现 JQuery 效果支持回调。因此，在将 toggle 替换为更合适的 show 和 hide 之后，效果非常好:

var tabs = $('.tabs ul li a')
tabs.click(function () {
    var previous = tabs.filter('.selected');
    // Prevent the event to happen if the user clicks the currently
    // selected tab
    if (previous.attr('href') === $(this).attr('href')) {
        return;
    }
    var direction = tabs.index($(this)) - tabs.index(previous);
    var options = direction > 0 ? [{direction: 'left'}, {direction: 'right'}] :
                                  [{direction: 'right'}, {direction: 'left'}]
    previous.removeClass('selected');
    $(this).addClass('selected');
    var previous_content = $(previous.attr('href'));
    var this_content = $($(this).attr('href'));
    previous_content.hide('slide', options[0], 300, function () {
        this_content.show('slide', options[1], 300);
    });
});

我什至添加了这个来处理按键(左右箭头键):

$(document).keydown(function (e) {
    var direction;
    switch (e.which) {
        case 37:
            direction = -1;
            break;
        case 39:
            direction = 1;
            break;
        default:
            return;
    }
    var next = tabs.index(tabs.filter('.selected')) + direction;
    if (next < 0 || next >= tabs.length) return;
    tabs.eq(next).trigger('click');
    return false;
});