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>

因此，当标签变为selected时，之前的标签内容应该像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;
});

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

1 个答案: