在 Angular 4 循环内动画化一个元素

Question

我是 Angular 4 的新手，我正在尝试在一个元素上单击它后应用动画。

在我当前的配置中，一旦我点击循环内的所有元素都是运行那个动画

<div  *ngFor="let media of mediaContent ; let i = index">
   <div class="photo-wrapper">
       <img src="{{media.thumbnail}}" [@rotatedState]='state'>
   </div>
   <button (click)="rotate($event, i)">
</div>

AngularJS部分

@Component({
selector: 'app-media',
templateUrl: './media.component.html',
styleUrls: ['./media.component.scss'],
animations: [
    trigger('rotatedState', [
        state('state0', style({ transform: 'rotate(0)' })),
        state('state1', style({ transform: 'rotate(-90deg)'})),
        state('state2', style({ transform: 'rotate(-180deg)' })),
        state('state3', style({ transform: 'rotate(90deg)' })),
        transition('state0 => state1', animate('400ms ease-out')),
        transition('state1 => state2', animate('400ms ease-in')),
        transition('state2 => state3', animate('400ms ease-in')),
        transition('state3 => state4', animate('400ms ease-in'))
    ])
]
})

rotateState = {
    1: 'state1',
    2: 'state2',
    3: 'state3',
    4: 'state4'
};
stateNum = 0;
state = 'state0';

rotate($event, i) {
    $event.preventDefault();
    $event.stopPropagation();
    this.stateNum = this.stateNum < 4 ? ++this.stateNum : 1;
    this.state = this.rotateState[this.stateNum];
    console.log(this.state);
}

Answer 1

您当前的实现只为所有媒体保留一种状态。由于正在共享状态，因此更改会反映在所有媒体中。

您需要为每个媒体都有一个单独的组件，它最终将包含每个媒体的单独状态。因此，一种媒体状态的变化不会影响另一种媒体。

请查看stackblitz demo here

app.component.html需要有如下模板，其中media是需要新建的组件：

<div  *ngFor="let media of mediaContent;">
  <media [media]="media"></media>
</div>

新的 media 组件现在应包含以下模板：

<div>
   <div class="photo-wrapper">
       <!-- width and height are just for demo purposes -->
       <img width="100" height="100" src="{{media.thumbnail}}" [@rotatedState]='state'> 
   </div>
   <button (click)="rotate($event)">Click</button>
</div>

在此之后，旋转媒体并保持其新状态的相关逻辑应从 app.component.ts 移动到 media.component.ts

在 Angular 4 循环内动画化一个元素

Animating one element inside Angular 4 loop

angular

ngfor

angular-animations