Question

我用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个方向均为20px）。

问题：div可见后（通过* ngIf），我的身高动画开始工作。但是元素的填充立即存在。其余部分将设置为动画。因此它在动画开始时具有闪烁效果。

我如何也可以将填充动画化？还是我应该更改其他内容？

Answer 1

要在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'}))
  ] )
])

角度动画：填充的动画高度不为0-> *

1 个答案: