如何解决Angular 8-动画图像src更改
我正在尝试创建一个角度8的动画,该动画在更改源时会拉入和拉出。目前,这仅在图像首次加载时有效,而在更改src后将无法继续制作动画。
这是我到目前为止所拥有的:
app.component.ts
import { trigger,state,style,animate,transition } from '@angular/animations';
....
....
@Component({
selector: "app-page",templateUrl: "app.page.html",styleUrls: ["app.page.scss"],animations: [
trigger('EnterLeave',[
state('flyIn',style({ transform: 'translateX(0)' })),transition('* => *',[
style({ transform: 'translateX(-100%)' }),animate('0.5s 300ms ease-in')
]),transition(':leave',[
animate('0.3s ease-out',style({ transform: 'translateX(100%)' }))
])
])
]
})
app.page.html
此代码是动画绑定的对象。我添加了一个功能,使其更易于测试。这只是将组件中的图像属性值更改为随机图像源
<img *ngIf="image" [src]="image" [@EnterLeave]="'flyIn'" (click)="changeImage()" />
changeImage()
changeImage() {
const sources = [
'https://images.unsplash.com/photo-1597741176776-25457188eafd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max','https://images.unsplash.com/photo-1597905040495-0aa996018b92?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max','https://images.unsplash.com/photo-1596280364433-7742f3fb771e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max'];
let randSrc = sources[Math.floor(Math.random() * sources.length)];
this.image = randSrc;
}
因此,此代码在初始加载时就动画而言工作良好,但是我似乎无法弄清楚如何对图像进行动画处理,以便当以编程方式更改属性值时,它可以拉入和拉出。没有指定的动画,似乎突然改变了。
解决方法
我能够在查询 src 时为图像设置动画 因为 src 属性是唯一改变的属性。
export const fadeIn = trigger( "fadeInAnimation",[
transition( '* => *',[
query( <---------THIS
"img[src]",<---------THIS
[
style( { opacity: 0 } ),animate( ".8s cubic-bezier(0.4,0.0,0.2,1)",style( { opacity: 1 } ) )
],{
optional: true
}
)
] )
] );
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。