Within my card component, I have various different components nested inside. This setup acts as a wrapper to enhance the UI aesthetics; it's a common approach that you've probably encountered before.
My goal is to make these cards hideable, displaying only the footer (which, interestingly, is generated by the child component rather than the card itself).
My strategy for handling animations involves:
- I click on the icon to toggle the visibility of the card between shown and hidden.
- It emits (using @Output()) a variable that is utilized in the child element to hide the specific part of the component that should only be visible when the card is "activated".
- This same variable is incorporated into two distinct animations: one within the card to shrink its size, and another within the inner component to conceal the section that should remain hidden when the card is "deactivated".
To get an overview of this implementation, take a look at these code snippets:
<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>
Inner component:
<div class="row margin upper-margin" [@animate]="cardOpen">
// lots of code
</div>
Parent component (card):
@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'))
])
]
})
This method "works". Look at the gifs below to see the results:
Behavior with regular clicks: https://gyazo.com/2c24d457797de947e907eed8a7ec432e
Anomalies occur when clicking rapidly (one example among several others that manifest in such scenarios): https://gyazo.com/bdc8dde3b24b712fa2b5f4dd530970dc
The behavior is peculiar. Check out the code snippet from the inner component designed to hide the portion I want concealed:
animations: [
trigger('animate', [
state('false', style({
opacity: 0
})),
state('true', style({
opacity: 1
})),
transition('false => true', animate('100ms')),
transition('true => false', animate('100ms'))
])
]
I experimented with using transitions like "ease in", "ease out", and "fade" within the animation but nothing seems to alter the behavior. Even adjusting the duration has no effect. None of these modifications prevent the occurrence of these bugs, and none achieve the desired outcome of gradually revealing or concealing the component section instead of abrupt changes in opacity.