Как анимировать конкретное изображение по клику в Angular

Question

Это мой код, я использую угловую анимацию, я хочу анимировать определенное изображение, используя этот код. Любая помощь очень ценится.

    <table class="table">
    <tr>
    <th>Id</th>
    <th>Image</th>
    <th>Delete</th>
    </tr>
    <tr *ngFor="let image of images">
    <td>{{image.id}}</td>
    <td><p [@myAwesomeAnimations]='state' (click)="animateMe()"> <img style="width:250px" src="http://localhost:8000{{image.image}}"/></p></td>
    <td><button class="btn btn-danger" (click)="delete(image)">Delete</button></td>
    </tr>           
    </table>

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    animations: [
        trigger('myAwesomeAnimations',[
        state('small',style({
            transform: 'scale(1)',
        })),
        state('large',style({
          transform: 'scale(1.2)',
        })),
        transition('small<=>large', animate('300ms ease-in',keyframes([
          style({opacity: 0,transform: 'translateY(-75%)',offset:0}),
          style({opacity: 1,transform: 'translateY(35px)',offset: .5}),
          style({opacity: 1,transform: 'translateY(0)',offset:1}),
        ]))),
        ]),
    ]

    })

когда я нажимаю на изображение, тогда анимируются все изображения

Answer 1

Причина, по которой все изображения анимируются, потому что они ограничены одним свойством state, поэтому для его исправления каждый элемент в images должен иметь собственное свойство анимации состояния

Попробуйте изменить модель вашего images и добавить свойство состояния для обработки вашей анимации

пример:

[{id: 1, animation: 'small'}, { id: 2, animation: 'small'}]

полное руководство см. Ниже в стеке

https://stackblitz.com/edit/angular-mfxfx3?file=src%2Fapp%2Fapp.component.html