jQuery .fadeIn()使元素在侧边栏展开时从底部滑动

Question

我的侧边栏有一个问题。我想在侧边栏折叠时隐藏徽标标题，并在侧边栏展开时显示。现在我使用jQuery的淡入淡出效果来实现这一点。然而，在展开侧边栏时，菜单项HOME从底部滑上来，这看起来并不好。

我假设徽标标题占据了HOME上方的空间，当按下侧边栏切换按钮时，标题会移到徽标旁边的顶部，并且HOME会向上滑动。

如何在不影响其他元素的情况下，在收拢/展开侧边栏时达到平滑的隐藏/显示效果？

下面是包含实际问题的完整代码的链接：Codepen

下面是我尝试过的示例代码：

HTML

<nav id="sidebar" class="active">
    <h1>
       <a href="index.html" class="logo"><span class="fas fa-globe-americas"></span> <span class="logo-title">villa</span></a>
     </h1>

     <ul class="list-unstyled components mb-5">
          <li>
            <a href="#"><span class="fa fa-home"></span> Home</a>
          </li>
     </ul>
</nav>

jQUery

(function($) {

    "use strict";

    $('#sidebarCollapse').on('click', function () {

      $('#sidebar').toggleClass('active');

      if($('#sidebar').hasClass('active')) {
        $('#sidebar .logo .logo-title').fadeOut(1);
      }else{
        $('#sidebar .logo .logo-title').fadeIn(1000);
      }

    });

})(jQuery);

Answer 1

如果您想保持折叠形式的HOME，最简单的方法是将其包装在p标记中，并添加引导程序类m-0来删除页边距：

<ul class="list-unstyled components mb-5">
  <li>
    <a href="#"><span class="fa fa-home"></span> <p class="m-0">Home</p></a>
  </li>          
</ul>