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并添加用于处理动画的state属性

示例：

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

有关完整指南，请参见下面的stackblitz

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

如何在Angular中单击时对特定图像进行动画处理

1 个答案: