Angular 2 - 如何为特定的 div 实现路由器动画？答案

【问题标题】：Angular 2 - How to implement Router Animation for a particular div?Angular 2 - 如何为特定的 div 实现路由器动画？
【发布时间】：2017-07-18 17:48:15
【问题描述】：

我这里有一个div 列表，我想在点击时滑动特定元素。目前所有元素都在滑动，因为状态是所有元素的单个变量。

.html

<div *ngFor="let item of [1,2,3,4,5]" [@slideOutAnimation]="state" (@slideOutAnimation.done)="onDone($event)">
   <button (click)="DeleteItem(item)">Delete</button>
</div>

.ts

@Component({
  selector: 'page-box',
  templateUrl: 'box.html',
  animations:[
      trigger('slideOutAnimation', [
          state('inactive',style({
              transform: 'translateX(0%)'
          })),
          state('active',style({
            transform: 'translateX(-200%)'
          })),
          transition('inactive => active', animate('500ms ease-out'))
        ])
    ]
})

export class BoxPage{

 state:string = 'inactive';

 DeleteItem(item){
    this.state = 'active';
  }
}

【问题讨论】：

标签： javascript html angular typescript angular-animations

【解决方案1】：

好的，所以我实现了一个 Hacky 解决方案：

<div class="card-w" (@slideOutAnimation.done)="DeleteThisItem($event)" [@slideOutAnimation]=" (selecteditem == j) ? 'active':'inactive' " *ngFor="let item of list; let j = index;">
 <button (click)="ClickedDelete(j)">Delete</button>
</div>

让我告诉你我做了什么。

[@slideOutAnimation]=" (selecteditem == j) ? 'active':'inactive'

首先，该条件检查我是否点击了delete 按钮。

如果我这样做了，那么它的状态将被评估为 active ，在这种情况下，动画从 inactive 播放到 active 状态，从而将其向左移动。

而且，当我点击delete 按钮时，ClickedDelete(j) 函数被调用

ClickedDelete(index){
  this.selecteditem = index;
}

然后在动画完成时，使用此回调 (@slideOutAnimation.done)="DeleteThisItem($event)" 调用 DeleteThisItem() 函数

然后我在DeleteThisItem()函数中拼接数组中的项目。

【讨论】：