Угловая анимация не работает для настроек непрозрачности (и больше ошибок)

У меня есть компонент карты, который обертывает другие разные компоненты внутри. Он похож на компонент-обертка для создания воображения пользовательского интерфейса; Наверное, вы видели этот подход много раз.

Дело в том, что я хочу, чтобы эти карты были спрятаны, просто показывая нижний колонтитул (который, кстати, также создается дочерним компонентом, а не самой картой).

Поэтому мой подход к обработке анимаций:

Я нажимаю значок, который переключает карту между видимыми и скрытыми.
Он выдает (с помощью @Output()) некоторую переменную, которая используется в дочернем элементе для скрытия части компонента, которую вы хотите отображать только при активации карты.
Эта же переменная используется в двух разных анимациях: одна на карте, для ее уменьшения и другая во внутреннем компоненте, для скрытия части, которую вы не хотите показывать, когда карта "деактивирована".

Вы можете увидеть большую картину с этими небольшими фрагментами, начиная с реализации:

<card [title]="'DATE SELECT'" class="col" (cardOpen)="config?.cardStatus['dateselect'] = $event">
   <date-picker-wrapper class="date-wrapper" [cardOpen]="config?.cardStatus['dateselect']" [config]="config" [dateranges]="dateranges" [doubleDateRange]="false">
   </date-picker-wrapper>
</card>

Внутренний компонент:

<div class="row margin upper-margin" [@animate]="cardOpen">
    // lots of code
</div>

Родительский компонент (карта):

@Component({
    selector: "card",
    styleUrls: ["./card.css"],
    template: '
    <div class="col card" [@animate]="enabled">
      <div class="row card-header">
        {{title}}
        <i (click)="switchVisibility()" class="fa fa-chevron-down icon-right"></i>
      </div>
      <ng-content></ng-content>

    </div>
    ',
    animations: [
      trigger('animate', [
        state('false', style({
          minHeight: "98px",
          height: "98px",
          maxHeight: "98px",

        })),
        state('true', style({
          minHeight: "270px",
          height: "270px",
          maxHeight: "270px"
        })),
        transition('false => true', animate('400ms ease-in')),
        transition('true => false', animate('400ms ease-out'))
      ])
    ]
})

Хорошо, этот подход "работает". Смотрите gifs и судите сами:

Поведение с "обычными" кликами: https://gyazo.com/2c24d457797de947e907eed8a7ec432e

Странная ошибка при быстром нажатии (один из разных, которые появляются в этой ситуации): https://gyazo.com/bdc8dde3b24b712fa2b5f4dd530970dc

Ладно, это странно. Посмотрите, как мой код находится во внутреннем компоненте, чтобы скрыть часть, которую я не хочу показывать:

animations: [
  trigger('animate', [
    state('false', style({
      opacity: 0
    })),
    state('true', style({
      opacity: 1
    })),
    transition('false => true', animate('100ms')),
    transition('true => false', animate('100ms'))
  ])
]

Я попытался включить переход, "легкость в", "облегчить", а также варианты "затухания", но ничего не изменило поведение. Даже не изменяя продолжительность. Ни один из этих изменений не позволяет этим ошибкам произойти, и абсолютно никто не делает этого, делая то, что я хочу: сделайте эту часть компонента медленной, поэтому непрозрачность медленно растет/понижается от одного состояния к другому, вместо того, чтобы внезапно появляться/исчезновения.

Ответы

Ответ 1

Если вы работаете с компонентом, который меняет его видимость, вам нужно работать с двумя псевдонимами перехода:

:enter, эквивалентное состоянию перехода void => *.
:leave это эквивалентно состоянию состояния * => void.

Вы можете прочитать официальную документацию здесь или посмотреть на YouTube.