如何创建一个类似于Github's文件管理器的动画

How to create an animation similar to Github's file manager one?

本文关键字：文件管理器 动画 Github 一个 何创建 创建 类似于      更新时间：2023-09-26

我想在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>

因此，当一个选项卡变成selected时，前一个选项卡内容应该像Github的filemanager一样横向滑动，并为当前内容腾出空间。我没能从Github的代码中发现它，所以我在这里问。如果可能的话，这应该只需要CSS，但Javascript解决方案是很好的接受(只要不需要动画库)。

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

解决方案
没有必要使用超时，因为我发现JQuery效果支持回调。因此，在用更合适的show和hide替换toggle之后，它工作得很漂亮:

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;
});
相关文章：