Angular 动画:填充不是高度为 0->* 的动画
Angular Animation: padding is not animated with height 0->*
我用Angular写了一个抽屉动画。看起来像这样:
transition(':enter', [
style({height: '0', opacity: 0}),
group([
animate(300, style({height: '*'})),
animate('300ms ease-in-out', style({'opacity': '1'}))
])
]) ,
transition(':leave', [
style({height: '*', opacity: 1}),
group([
animate(300, style({height: 0})),
animate('300ms ease-in-out', style({'opacity': '0'}))
] )
])
我的主要 div(粘贴此动画的位置)也有一个填充(所有 4 个方向均为 20 像素)。
问题:一旦 div 可见(通过 *ngIf),我的高度动画就开始工作。但是元素的填充立即就在那里。其余的将被动画化。所以它在动画开始时有一个闪烁的效果。
如何让内边距也具有动画效果?或者我应该改变什么吗?
要在 div
的高度上实现流畅的动画,您还应该为 padding-top
和 padding-bottom
属性设置动画:
transition(':enter', [
style({height: '0', opacity: 0, 'padding-top': '0', 'padding-bottom': '0'}),
group([
animate(300, style({height: '*', 'padding-top': '*', 'padding-bottom': '*'})),
animate('300ms ease-in-out', style({'opacity': '1'}))
])
]) ,
transition(':leave', [
style({height: '*', opacity: 1, 'padding-top': '*', 'padding-bottom': '*'}),
group([
animate(300, style({height: 0, 'padding-top': 0, 'padding-bottom': 0})),
animate('300ms ease-in-out', style({'opacity': '0'}))
] )
])
我用Angular写了一个抽屉动画。看起来像这样:
transition(':enter', [
style({height: '0', opacity: 0}),
group([
animate(300, style({height: '*'})),
animate('300ms ease-in-out', style({'opacity': '1'}))
])
]) ,
transition(':leave', [
style({height: '*', opacity: 1}),
group([
animate(300, style({height: 0})),
animate('300ms ease-in-out', style({'opacity': '0'}))
] )
])
我的主要 div(粘贴此动画的位置)也有一个填充(所有 4 个方向均为 20 像素)。
问题:一旦 div 可见(通过 *ngIf),我的高度动画就开始工作。但是元素的填充立即就在那里。其余的将被动画化。所以它在动画开始时有一个闪烁的效果。
如何让内边距也具有动画效果?或者我应该改变什么吗?
要在 div
的高度上实现流畅的动画,您还应该为 padding-top
和 padding-bottom
属性设置动画:
transition(':enter', [
style({height: '0', opacity: 0, 'padding-top': '0', 'padding-bottom': '0'}),
group([
animate(300, style({height: '*', 'padding-top': '*', 'padding-bottom': '*'})),
animate('300ms ease-in-out', style({'opacity': '1'}))
])
]) ,
transition(':leave', [
style({height: '*', opacity: 1, 'padding-top': '*', 'padding-bottom': '*'}),
group([
animate(300, style({height: 0, 'padding-top': 0, 'padding-bottom': 0})),
animate('300ms ease-in-out', style({'opacity': '0'}))
] )
])