角度动画：填充不以高度 0->* 进行动画处理答案

【问题标题】：Angular Animation: padding is not animated with height 0->*角度动画：填充不以高度 0->* 进行动画处理
【发布时间】：2018-11-29 16:00:23
【问题描述】：

我用 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），我的高度动画就会开始工作。但是元素的填充是立即存在的。其余的将是动画的。所以在动画开始的时候会有闪烁的效果。

我怎样才能让填充也被动画化？或者我应该改变什么？

【问题讨论】：

标签： css angular angular-animations

【解决方案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'}))
  ] )
])

【讨论】：