CODEWITHSUNDEEP
javascriptangularangular-animations
Hamza Haddad
Hamza Haddad

Reputation: 1556

Animation in Angular 5 runs instantly

I create a trigger with two states and a transition between two states

When I click to make animation it runs instantly even when I enter 3000ms transition time

<div class="divv" [@goals]='stateExression'>
  <mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>Shiba Inu</mat-card-title>
      <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        Hello
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-button (click)="anim()">LIKE</button>
      <button mat-button>SHARE</button>
    </mat-card-actions>
  </mat-card>
</div>

state change function :

stateExression : string='inactive';

anim() {
  if(this.stateExression === 'inactive')
  this.stateExression ='expended';
  else 
  this.stateExression = 'inactive';
}

Animation trigger :

trigger('goals', [
    state('inactive', style({
      height: '300px'
  })),
    state('expended', style({
      height: '0px'
  })),
  transition ('inactive <=> expanded',animate('2000ms'))

  ])
]

How to make transition runs slowly ?

Upvotes: 1

Views: 828

Answers (1)

SONGSTER
SONGSTER

Reputation: 615

trigger('goals', [
    state('inactive', style({
      height: '300px'
  })),
    state('expended', style({
          ^^^^^^^^^^^   
      height: '0px'
  })),
  transition ('inactive <=> expanded',animate('2000ms'))
                           ^^^^^^^^^^
  ])
]

state names are different expanded vs expended

Upvotes: 2

Related Questions