如何在使用 Ionic 5 中的 Angular 路由到具有不同 URL 参数的同一页面时触发动画
How to trigger animation when routed to the same page with different URL parameter using Angular in Ionic 5
我试图在使用不同 url 参数将页面路由到自身时触发动画。
例如,对于 post/1
url,动画效果很好,但如果我路由到 post/2
或 post/3
,动画就不起作用。
我使用 Ionic Animation 编写动画并在每次路由参数更改时调用该方法。有人可以帮忙吗?
这是我的代码的摘录
HTML
<ion-icon class="custom-icon" name="chevron-back-outline"></ion-icon>
TS
constructor(private animationController: AnimationController) {
this.route.params.subscribe((val) => {
this.animateIcon();
});
}
animateIcon() {
this.animationController
.create()
.addElement(document.querySelector('.custom-icon'))
.duration(1500)
.iterations(3)
.fromTo('transform', 'translateX(0px)', 'translateX(-80px)')
.fromTo('opacity', '1', '0')
.play();
}
尝试将调用函数放入 ionViewWillEnter()
constructor(private animationController: AnimationController) {
}
ionViewWillEnter(){
this.route.params.subscribe((val) => {
this.animateIcon();
});
}
animateIcon() {
this.animationController
.create()
.addElement(document.querySelector('.custom-icon'))
.duration(1500)
.iterations(3)
.fromTo('transform', 'translateX(0px)', 'translateX(-80px)')
.fromTo('opacity', '1', '0')
.play();
}
我自己想出来了。我没有使用 querySelector
捕获 class 名称,而是使用 ElementRef
符号来使其工作。现在,当我路由到任何 /post
页面时,它始终有效。
HTML
<ion-icon #leftIcon class="custom-icon" name="chevron-back-outline"></ion-icon>
TS
@ViewChild('icon1', { read: ElementRef, static: false }) leftIcon: ElementRef;
constructor(private animationController: AnimationController) {
this.route.params.subscribe((val) => {
this.animateIcon();
});
}
animateIcon() {
this.animationController
.create()
.addElement(this.leftIcon.nativeElement)
.duration(1500)
.iterations(3)
.fromTo('transform', 'translateX(0px)', 'translateX(-80px)')
.fromTo('opacity', '1', '0')
.play();
}
我试图在使用不同 url 参数将页面路由到自身时触发动画。
例如,对于 post/1
url,动画效果很好,但如果我路由到 post/2
或 post/3
,动画就不起作用。
我使用 Ionic Animation 编写动画并在每次路由参数更改时调用该方法。有人可以帮忙吗?
这是我的代码的摘录
HTML
<ion-icon class="custom-icon" name="chevron-back-outline"></ion-icon>
TS
constructor(private animationController: AnimationController) {
this.route.params.subscribe((val) => {
this.animateIcon();
});
}
animateIcon() {
this.animationController
.create()
.addElement(document.querySelector('.custom-icon'))
.duration(1500)
.iterations(3)
.fromTo('transform', 'translateX(0px)', 'translateX(-80px)')
.fromTo('opacity', '1', '0')
.play();
}
尝试将调用函数放入 ionViewWillEnter()
constructor(private animationController: AnimationController) {
}
ionViewWillEnter(){
this.route.params.subscribe((val) => {
this.animateIcon();
});
}
animateIcon() {
this.animationController
.create()
.addElement(document.querySelector('.custom-icon'))
.duration(1500)
.iterations(3)
.fromTo('transform', 'translateX(0px)', 'translateX(-80px)')
.fromTo('opacity', '1', '0')
.play();
}
我自己想出来了。我没有使用 querySelector
捕获 class 名称,而是使用 ElementRef
符号来使其工作。现在,当我路由到任何 /post
页面时,它始终有效。
HTML
<ion-icon #leftIcon class="custom-icon" name="chevron-back-outline"></ion-icon>
TS
@ViewChild('icon1', { read: ElementRef, static: false }) leftIcon: ElementRef;
constructor(private animationController: AnimationController) {
this.route.params.subscribe((val) => {
this.animateIcon();
});
}
animateIcon() {
this.animationController
.create()
.addElement(this.leftIcon.nativeElement)
.duration(1500)
.iterations(3)
.fromTo('transform', 'translateX(0px)', 'translateX(-80px)')
.fromTo('opacity', '1', '0')
.play();
}