Question

我在使用bootstrap 4导航栏而没有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

转换必须知道操作前和操作后的状态。另外，如果使用*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

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

1 个答案: