Угловая анимация: отступы не анимированы с высотой 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 (к которому прикреплена эта анимация) также имеет отступ (20 пикселей для всех 4 направлений).

Проблема: как только div становится видимым (через * ngIf), моя анимация высоты начинает работать. Но заполнение элемента сразу есть .. Остальное будет анимировано. Таким образом, в начале анимации появляется эффект мерцания.

Как я могу сделать так, чтобы отступы были анимированы? Или мне еще что-то поменять?


angular css angular-animations
person akcasoy    schedule 06.08.2018    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Чтобы добиться плавной анимации на высоте 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'}))
  ] )
])
person mik.corcuera    schedule 29.11.2018