Как анимировать <tr> открытие / закрытие вверх и вниз с помощью автоматического расчета свойств

Question

У меня есть строка таблицы, которая не отображается до тех пор, пока вы не нажмете кнопку "Просмотр сведений" в строке над ней. В настоящее время я использую *ngIf для отображения второй строки и изменяю логическое свойство связанного объекта при нажатии кнопки "Просмотреть подробности". Я прочитал страницу с анимациями в документации angular2 и попытался реализовать анимацию "свернуть / развернуть", чтобы, когда строка 2-ой таблицы стала видимой, она анимировалась с высоты 0px -> полностью расширенной высоты строки (*px).

Самый близкий пример того, что я хочу сделать, это анимация, которая убрала героя с высоты (* px) до 0px, и он плавно рухнул / скользнул вверх.

animations: [
 trigger('shrinkOut', [
  state('in', style({height: '*'})),
  transition('* => void', [
    style({height: '*'}),
    animate(250, style({height: 0}))
  ])
 ])
]

Я не могу заставить это работать для моей ситуации, описанной выше. Я попробовал это в сочетании с *ngIf, и это не сработало. (Строка просто мгновенно открывается / закрывается, как это было до добавления анимации.) Я попытался избавиться от *ngIf и связать свойство [hidden] безуспешно. Я также попытался удалить *ngIf и [hidden] и просто использовать анимацию, но это тоже не сработало (строка просто оставалась открытой и никогда не закрывалась).

Моя вторая строка таблицы HTML выглядит так:

<tr [@visibilityChanged]="visibility">
      <td  colspan="8" class="details-row">
          ...
      </td>
</tr>

Моя анимация выглядит так:

trigger('visibilityChanged', [
  state('hidden', style({height: '*'})),
  transition('* => void', [
    style({height: '*'}),
    animate(1000, style({height: 0}))
  ])
])

и переменная видимости - это строка в компоненте, которая изменяется с "скрытого" на "показанный" и наоборот, когда нажимается кнопка просмотра сведений.

Возможно ли то, что я пытаюсь достичь с помощью угловой анимации 2?

Answer 1

Я долго боролся с этим. Тогда я понял, что нам нужно анимировать высоту ячейки, а не высоту строки. Именно текст в каждой ячейке таблицы приводит к тому, что строка остается на своей фиксированной высоте и не учитывает анимацию высоты строки, поэтому строка никогда не сворачивается, она просто "привязывается" к виду.

Поэтому добавьте привязки триггера к каждому td следующим образом: (только две ячейки показаны для экономии места)

<tr>
<td class="col3Destination" [@rowVisibleState]="row.isVisible">{{row.version}} 
/td>
<td class="col4Destination" [@rowVisibleState]="row.isVisible">{{row.dataType}}</td>
</tr>

А вот код компонента анимации:

animations: [
        trigger('rowVisibleState',
        [
            state('true',
                style({
                   height: '40px',
                   opacity: 1,
                   fontSize: '14px',
                   display: 'table-row'
                })),

            transition('0 => 1', [
                animate('500ms ease-in', keyframes([
                    style({ display: 'table-row', offset: 0 }),
                    style({ fontSize: 0, offset: 0 }),
                    style({ height: 0, offset: 0 }),
                    style({ opacity: 0, offset: 0.0 }),
                    style({ height: '40px',fontSize: '14px', display: 'table-row', opacity: 1, offset: 1.0 })
                ]))
            ]),
            state('false',
                style({
                    height: '0px',
                    opacity: 0,
                    display: 'none',
                    fontSize: 0
                })),
            transition('1 => 0', [
                animate('500ms ease-out', keyframes([
                    style({ opacity: 1, offset: 0 }),
                    style({ fontSize: '14px', offset: 0 }),
                  style({ height: '40px', offset: 0 }),
                  style({ fontSize: 0, height: 1, opacity: 0.5, offset: 0.9}),
                  style({ height: '0px', opacity: 1, display: 'none', offset: 1.0 })

                ]))
            ])
            ])
    ]