Angular animation while hiding / showing with pure CSS

Question

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

yeah this is a great approach. not reliant on angular animations which might change or deprecate. — Gurnard
– Gurnard, Commented Mar 24, 2021 at 12:20

Abdul Rafay · Accepted Answer · 2018-09-02 10:03:33Z

2

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'"

answered Sep 2, 2018 at 10:03

Abdul Rafay

3,3915 gold badges27 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular animation while hiding / showing with pure CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related