CODEWITHSUNDEEP
angular
NJKannur
NJKannur

Reputation: 91

how to use one animation in different div in angular 4? is it possible?

this is my animation code

[
trigger('slideInOut', [
  transition(':enter', [
    style({transform: 'translateX(100%)'}),
    animate('300ms ease-in', style({transform: 'translateX(0%)'}))
  ]),
  transition(':leave', [
    animate('300ms ease-in', style({transform: 'translateX(-100%)'}))
  ])
])

]

i need to use two div ,when one div is false second div want to follow the animation ? any help? my html code is 

<div>
  <div *ngIf="show_chart" [@slideInOut]>
    <label>New One</label>
 </div>
 <div *ngIf="show_chart" [@slideInOut]>
    <label>Second one</label>
</div>

only first div is displaying

Upvotes: 1

Views: 187

Answers (1)

Aniket Avhad
Aniket Avhad

Reputation: 4145

Don't use the *ngIf, The proper syntax of animation is below,

animations:  [
  trigger('slideInOut', [
    state('1', style({ opacity: 0 })),
    state('0', style({ opacity: 1 })),
    transition('1 => 0', [
      style({ transform: 'translateX(100%)' }),
      animate('300ms ease-in', style({ transform: 'translateX(0%)' }))
    ]),
    transition('0 => 1', [
      animate('300ms ease-in', style({ transform: 'translateX(-100%)' }))
    ])
  ])
]

and in html write as following ways

<div>
  <div [@slideInOut]="!show_chart">
    <label>New One</label>
 </div>
 <div [@slideInOut]="show_chart">
    <label>Second one</label>
</div>

<button (click)="show_chart = !show_chart">Toggle Me</button>

As you missed to use state in animations.

Use of state is use to check the current status.

Upvotes: 2

Related Questions