Переход при изменении содержимого таблицы Angular 4 - PullRequest
Новая
       11

Переход при изменении содержимого таблицы Angular 4

0 голосов
/ 30 января 2020

Im Создание простой таблицы с переполнением Y прокрутки, которую можно скрыть с помощью maxHeight. Я использую переходы на maxHeight для анимации при отображении таблицы.

Проблема в том, что таблица может измениться на асинхронную c, но при изменении таблицы анимация не отображается. Есть ли способ показать анимацию в любом случае? 

    <div class="grid-container" [ngClass]="{'collapsed': !displayGrid, 'not-collapsed': displayGrid}">
      <table align="center">
        <thead>
          <tr>
            <th class="{{ col + '-cell header-cell'}}" *ngFor="let col of columns">
              <span>{{getColumnName(col)}}</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let row of rows; let i = index">
            <td *ngFor="let col of columns" class="{{ col + '-cell'}}">
              <span>{{getCellValue(i, col)}}</span>
            </td>
          </tr>
          <tr *ngIf="rows.length === 0">
            <td [colSpan]="columns.length">
              <span>No se encontraron valores</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

.grid-container {
    margin-bottom: 15px;

    height: inherit;
    max-height: 0;
    overflow-y: scroll;

    transition: max-height 0.3s ease;
  }

.not-collapsed {
  max-height: 150px !important;
  border-bottom: 2px solid rgba(0,0,0,.12);
}

переход отображается правильно при отображении или скрытии таблицы, но не при изменении содержимого таблицы ... он просто поднимает

имеет кто-нибудь имел дело с этим? Спасибо

...