角度mat-tab-group
中的每个mat-tab
都有一个动画效果。给定的动画效果非常烦人,因此我想使用其他动画效果。我已经有else的某人为fadein
和fadeout
设计了一个。
export const fadeAnimation = trigger('fadeAnimation', [
// The '* => *' will trigger the animation to change between any two states
transition('* => *', [
// The query function has three params.
// First is the event, so this will apply on entering or when the element is added to the DOM.
// Second is a list of styles or animations to apply.
// Third we add a config object with optional set to true, this is to signal
// angular that the animation may not apply as it may or may not be in the DOM.
query(
':enter',
[style({ opacity: 0 })],
{ optional: true }
),
query(
':leave',
// here we apply a style and use the animate function to apply the style over 0.3 seconds
[style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],
{ optional: true }
),
query(
':enter',
[style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
{ optional: true }
)
])
]);
尝试像这样应用
<mat-tab-group animationDuration="0ms">
<mat-tab label="First">
<div [@fadeAnimation]="'enter'">
Content 1
</div>
</mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>
失败。有什么提示如何正确应用吗?
根据@ysf的建议更新了样本。
答案 0 :(得分:3)
考虑到您的代码,我想您尝试在淡出上一个标签的同时淡入新标签。
我建议使用Eldon's answer进行一些小的更改:
.mat-tab-body {
animation: fade-out 0.5s;
opacity: 0;
}
.mat-tab-body.mat-tab-body-active {
animation: fade-in 0.5s;
opacity: 1;
}
@keyframes fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-out {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
答案 1 :(得分:1)
我也不喜欢幻灯片左右动画。您可以执行我解决的淡入淡出动画的变通方法。
您可以禁用Angular Mat Tab动画,然后在 mat-tab-body-active 类中添加一些CSS关键帧动画。
要禁用动画,可以将其添加到mat-tab中。
<mat-tab-group [@.disabled]="true">
或者您可以在全局可见的here
中将其禁用禁用动画后,将其添加到您的style.css文件中
.mat-tab-body.mat-tab-body-active {
animation: fade 0.5s;
}
@keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
检查示例here