Angular 8 Dynamic Animation

Question

Hi have a div which has 6 elements, with two buttons Left N Right, as per below image

On Click of Left, I have to animate like

Remove --> Right to Left
Add --> Left  to Right

Also On Click of Right icon have to animate like

Remove --> Left to Right
Add --> Right to Left

Below is my code which works for animating Right Button but how to do vice-versa

my Animation Logic

animations: [
  trigger("slideInOut", [
    transition(":enter", [
      style({ transform: "translateX(100%)" }),
      animate("400ms ease-out", style({ transform: "translateX(0%)" }))
    ]),
    transition(":leave", [
      animate("400ms ease-in", style({ transform: "translateX(-100%)" }))
    ])
  ])
];

Respective HTML

<div fxLayout="row" *ngIf="!HideSociety" [@slideInOut]>
  <mat-card class="collection-boxdata" *ngFor="let obj of SocConnArray">
    <mat-card-title>
      <span>{{obj.Date | date:'dd/MM/yyyy'}}</span>
    </mat-card-title>

    <mat-card-content>
      <div fxLayout="row">
        <div fxFlex="50" fxFlex.gt-sm="100">
          <h3>Active : <span>{{obj.ConnSoc}}</span></h3>
          <h3>Non Active : <span>{{obj.NonConnSoc}}</span></h3>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>

<div
  class="mat-card-footer-content"
  div
  fxLayout="row"
  fxLayoutAlign="center center"
>
  <button mat-raised-button (click)="moveLeft()" color="primary">
    <mat-icon>navigate_before</mat-icon>
  </button>
  <button mat-raised-button (click)="moveRIght()">
    <mat-icon>navigate_next</mat-icon>
  </button>
</div>

I just have to animate Left To Right on Right Button Click and Right to Left on Left button click

Thanks for any help will be grateful.

score 0 · Answer 1 · answered Jul 11 '20 at 07:03

For demo: Demo

Hope this will help

html:

<div onclick="animateLtrRtl()">Click Me</div>
<div class="right-to-left" id="thisIsId"> I will move </div>

JS:

function animateLtrRtl() {
   var element = document.getElementById("thisIsId");
   element.classList.toggle("left-to-right");
}

CSS:

.right-to-left{

  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  position:absolute;
}

.left-to-right{

  transform: translate(3em,0);
  -webkit-transform: translate(3em,0);
  -moz-transform: translate(3em,0);
  -o-transform: translate(3em,0);
  -ms-transform: translate(3em,0);
}

The code you provide will work but when working with angular animations this is code is not preferred. — Nahid Ali, Jul 17 '20 at 07:09

score 0 · Answer 2 · answered Jul 17 '20 at 07:08

To achieve the behaviour you can refer this link https://medium.com/showpad-engineering/angular-animations-lets-create-a-carousel-with-reusable-animations-81c0dd8847e8.

What you need to do is just to change the animation from carouselAnimation to slideInOut or any as per your need.

Do also remember that you will have to create a strategy to replace the card from controller on click of right and left button, the behaviour can not be just achieved by replacing the element in SocConnArray. You will have to pre render all the ui view and on click of the right and left button you will have to hide the currently displayed view and present new view, which will automate the animation.

Angular 8 Dynamic Animation

2 Answers2