CODEWITHSUNDEEP
angularangular-animations
tatsu
tatsu

Reputation: 2536

Angular 2 - 5 animations but WITHOUT *ngIf

so you can do this :

<div *ngIf="isDetailsOpen" [@slideRightAnimation] class="inline-carousel">
  <div class="pane">
    <app-filters ></app-filters>
  </div>
  <div  class="pane">
    <app-details></app-details>
  </div>
</div>

but what if what you want is the same exact behavior as angular animations but without using *ngIf

Ergo an [@Animation] that is triggered by something other than ngIf

why this functionality would be useful to me is : having centralized animations that apply not only to appearing and disappearing elements but also to elements that stay there.

I want to have a carousel effect on two panes but I've only got this working with a css-animated margin-left.

this isn't satisfactory because then resizing the viewport will make it re-adjust.

whereas *ngIf animations and router animations behave as if they've ceased to exist once they've played to completion. (that is, until the next triggering event, of course).

I'd like to either replicate that or use this animation setup but trigger it another way.

Upvotes: 2

Views: 909

Answers (1)

user4676340
user4676340

Reputation:

Angular documentation:

You can create a state animation like this.

trigger('fade', [
  state('hello', style({ opacity: 0 })),
  state('world', style({ opacity: 1 })),
  transition('hello <=> world', animate('275ms ease-in-out'))
]);

In your HTML code, you can use this like this

<div [@fade]="myVar" class="inline-carousel">

If myVar = 'hello', you will have no opacity, if it equals 'world', you will have opacity.

Upvotes: 3

Related Questions