CODEWITHSUNDEEP
cssangularanimation
AlbertMunichMar
AlbertMunichMar

Reputation: 1866

Angular animation while hiding / showing with pure CSS

Is it possible to use normal CSS animations in angular?

I am trying just to show a div with a simple animation (the div is hide, then appears)

<div class="burguer-icon" (click)="onClick()">
  <i class="fas fa-bars"></i>
</div>

<div 
  [ngClass]="showMenu ? 'shown' : 'hide'"
  class="menu-content"
>
  <div class="cross-icon" (click)="onClose()">
    <i class="fas fa-times"></i>
  </div>

  // content
</div>

and I toggle the state, if clicked or not, in my component.ts

onClick() {
    this.showMenu = !this.showMenu;
  }

  onClose() {
    this.showMenu = !this.showMenu;
  }

my css file for this component looks like this:

.burguer-icon {
  background-color: orange;
}

.menu-content {
  position: absolute;
  top: 0px;
  width: 100vw;
  height: 100vh;
  background-color: green;
  transition: all 3s ease;
}

.show {
  left: 0px;
}

.hide {
  left: 90vw;
}

Why this simple animation does not work? With angular, are you forced to use its animation strategy? https://angular.io/guide/animations

Thanks in advance

Upvotes: 1

Views: 2898

Answers (1)

Abdul Rafay
Abdul Rafay

Reputation: 3391

Yes, you can use normal CSS animations. It's working fine on my end. Issue seems to be a typo in your class name show in css and shown in component html. Update your html like:

[ngClass]="showMenu ? 'show' : 'hide'"

Upvotes: 2

Related Questions