使用纯 CSS 从左侧滑动导航栏

Question

我正在使用 bootstrap 4 导航栏制作 Angular 应用程序没有 jquery 或任何第三方插件..

HTML：

<nav class="navbar navbar-expand-md bg-theme">
    <div class="container-fluid">
        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" (click)="toggleNavigation()" data-target="#collapsibleNavbar">
            <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav text-light">
                <li class="nav-item">
                    <a routerLink="/dashboard" href="#">Dashboard</a>
                </li>
                <li class="nav-item">
                    <a routerLink="/template" href="#">Template</a>
                </li>
                <li class="nav-item">
                    <a routerLink="/product" href="#">Product</a>
                </li>
            </ul>
        </div>
    </div>
          <!-- I have implemented the duplicate of above give navbar-nav for responsive.. Is there any need for this or can we do with the above code itself?? -->
      <div *ngIf="showResponsivenavbar">
            <ul class="navbar-nav text-light bg-custom-light p-3">
                <li class="nav-item pb-2">
                    <a routerLink="/dashboard" href="#">Dashboard</a>
                </li>
                <li class="nav-item pb-2">
                    <a routerLink="/template" href="#">Template</a>
                </li>
                <li class="nav-item pb-2">
                    <a routerLink="/product" href="#">Product</a>
                </li>
            </ul>
      </div>
</nav>

CSS：

.bg-custom-light a {
  color: #fff!important;
}
.bg-custom-light {
    background-color: #e51631;
  }

  .navbar-nav {
    position:fixed;
    top:7%;
    left:0;
    width:150px;
    -moz-transition:all 200ms ease-in;
    -webkit-transition:all 200ms ease-in;
    -o-transition:all 200ms ease-in;
    transition:all 200ms ease-in;
}

我想在单击图标栏时在响应屏幕上切换导航栏，该图标栏在图标栏底部显示导航栏。 导航栏被显示，但我想添加过渡效果，因为它需要从左边滑入一定的持续时间，所以我在 css 中给出了以下内容，

    -moz-transition:all 200ms ease-in;
    -webkit-transition:all 200ms ease-in;
    -o-transition:all 200ms ease-in;
    transition:all 200ms ease-in;

但我看不到任何动画效果。请帮助我在单击切换图标栏的同时从左侧实现动画效果的幻灯片。我还搜索了周围的解决方案，但找不到正确的解决方案，并尝试了对我没有帮助的过渡 css。

工作演示https://stackblitz.com/edit/angular-xmwnxt

Answer 1

Transition 需要知道之前的状态和之后的状态才能工作。此外，如果使用 *ngIf 从 DOM 中删除该元素，我们将无法对其进行动画处理。

相反，您可以向它添加一个类来指定它是否打开

 [ngClass]="{'open': showResponsivenavbar}"

然后，更改 CSS，使其默认不在屏幕上。当我们添加 open 类时，我们可以在屏幕上移动它，如下所示：

  .navbar-nav {
    position:fixed;
    top:7%;
    left: -150px;
    width:150px;
    -moz-transition:all 200ms ease-in;
    -webkit-transition:all 200ms ease-in;
    -o-transition:all 200ms ease-in;
    transition:all 200ms ease-in;
  }

  .open .navbar-nav {
    left: 0;
  }

现在，当添加open 类时，菜单将从left: -150px 转换为left: 0

Here is a fork of your Stackblitz to show it working