Angular 8 动态动画答案

【问题标题】：Angular 8 Dynamic AnimationAngular 8 动态动画
【发布时间】：2020-10-27 09:38:45
【问题描述】：

你有一个 div，它有 6 个元素，有两个按钮 Left N Right，如下图所示

单击左键时，我必须像动画一样

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

右击图标也必须像动画一样

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

下面是我的代码，它适用于动画右按钮，但反之亦然

我的动画逻辑

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%)" }))
    ])
  ])
];

相应的 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>

我只需要动画右键单击从左到右左键单击时从右到左

感谢您的任何帮助。

【问题讨论】：

标签： javascript css angular animation angular-animations

【解决方案1】：

演示：Demo

希望这会有所帮助

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);
}

【讨论】：

您提供的代码可以使用，但是在使用角度动画时，此代码不是首选。

【解决方案2】：

要实现该行为，您可以参考此链接https://medium.com/showpad-engineering/angular-animations-lets-create-a-carousel-with-reusable-animations-81c0dd8847e8。

您需要做的只是将动画从carouselAnimation 更改为slideInOut 或根据您的需要。

还请记住，您必须创建一个策略来在单击左右按钮时从控制器中替换卡片，该行为不能仅通过替换 SocConnArray 中的元素来实现。您必须预先渲染所有 ui 视图，然后单击左右按钮，您必须隐藏当前显示的视图并呈现新视图，这将自动执行动画。

【讨论】：