У меня есть компонент карты, который обертывает другие разные компоненты внутри. Он похож на компонент-обертка для создания воображения пользовательского интерфейса; Наверное, вы видели этот подход много раз.
Дело в том, что я хочу, чтобы эти карты были спрятаны, просто показывая нижний колонтитул (который, кстати, также создается дочерним компонентом, а не самой картой).
Поэтому мой подход к обработке анимаций:
- Я нажимаю значок, который переключает карту между видимыми и скрытыми.
- Он выдает (с помощью @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'))
])
]
Я попытался включить переход, "легкость в", "облегчить", а также варианты "затухания", но ничего не изменило поведение. Даже не изменяя продолжительность. Ни один из этих изменений не позволяет этим ошибкам произойти, и абсолютно никто не делает этого, делая то, что я хочу: сделайте эту часть компонента медленной, поэтому непрозрачность медленно растет/понижается от одного состояния к другому, вместо того, чтобы внезапно появляться/исчезновения.