[英]Angular animate if condition is met
我在角度应用程序中有一个动画
@Component({
selector: 'app-portfolio',
templateUrl: 'portfolio.page.html',
styleUrls: ['portfolio.page.scss'],
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(-100%)'}),
animate('200ms ease-in', style({transform: 'translateY(0%)'}))
]),
transition(':leave', [
animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
])
])
]
})
但是在同一位置有两个元素使用它,并且它们不能同时出现在屏幕上。 所以如果我选择显示一个元素,那么另一个元素将自动隐藏。 问题是如果另一个元素没有被动画化,我只想让元素动画出来。有没有办法只在满足条件的情况下显示动画? 像这样的东西?
<ion-item color="primary" (element2open === false)=[@slideInOut] *ngIf="openElement1" lines="none">
</ion-item>
<ion-item color="primary" (element1open === false)=[@slideInOut] *ngIf="openElement2" lines="none">
</ion-item>
解决方案1:
您可以使用以下方法禁用动画:
@HostBinding('@.disabled')
public animationsDisabled = false;
这为您的组件设置了 css 类: ng-animate-disabled
在此处查看示例切换复选框“切换所有动画”
解决方案2:为了避免动画同时进出,您可以使用sequence()按给定顺序运行动画。
trigger('slideInOut', [
transition('* => *', [
sequence([
query(':enter', [
style({transform: 'translateY(-100%)'}),
animate('200ms ease-in', style({transform: 'translateY(0%)'}))
], {optional: true}),
query(':leave', [
animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
], {optional: true})
])
])
])
这将运行第一个动画进入和第二个动画离开。 如果您想要相反的顺序,请更改数组中的顺序。
确保使用@slideInOut
注释父@slideInOut
,而不是 item 元素。
<parent @slideInOut>
<ion-item color="primary" *ngIf="openElement1" lines="none">
</ion-item>
<ion-item color="primary" *ngIf="openElement2" lines="none">
</ion-item>
</parent>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.