Nrthugu

I am making angular application where i am using bootstrap 4 navbar without jquery or any third party plugin..

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;

}

I would like to make navbar toggle on responsive screen on click the icon bars which displays the navbar at bottom of icon bars.
The navbar gets displayed but i would like add the transition effect as it needs to slide in from left with certain duration, so i have given the following 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;

But i couldn't see any animation effect in it. Kindly help me to achieve the slide in animation effect from left while clicking the toggle icon bar.. I also searched for the solutions around but couldn't get the right one and tried with transition css that too not helped me.

Working demo https://stackblitz.com/edit/angular-xmwnxt

Transition needs to know both the before state, and the after state for it to work. Also, if the element is removed from the DOM with *ngIf, it won't exist for us to animate it.

Instead, you can add a class to it that specifies whether it's open or not

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

Then, change the CSS so that, be default, it's off the screen. When we add the open class, we can then move it on-screen, like so:

  .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;

  }

Now, when the open class is added, the menu will transition from being left: -150px to left: 0

Here is a fork of your Stackblitz to show it working