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

我这里有一个div的列表，我想要点击一个特定的元素。目前所有元素都是滑动的，因为状态是所有元素的单个变量。Angular 2 - 如何为特定的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'; 
    } 
}

来源

2017-07-18 Sai Datta

好了，所以我实现了一个哈克解决方案：

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

，然后在动画completition的DeleteThisItem()函数调用此回调(@slideOutAnimation.done)="DeleteThisItem($event)"

那么我剪接DeleteThisItem()函数中的数组中的项。

来源

2017-07-18 09:42:51

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

回答

相关问题