How to get smooth animation with contents using 'gap' in Angular?

Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram: https://www.instagram.com/ky.emrah

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!How to get smooth animation with contents using 'gap' in Angular?

I've been using the following animation for a while and it works fine to expand / collapse an element:
const expanded = style({ height: '*', opacity: 1 });
const collapsed = style({ height: 0, opacity: 0 });
const animation = animate(`300ms cubic-bezier(0.4, 0.0, 0.2, 1)`);

export const expandCollapse = trigger('expandCollapse', [
transition(':enter', [collapsed, animation, expanded]),
transition(':leave', [animation, collapsed]),
]);

const expanded = style({ height: '*', opacity: 1 });
const collapsed = style({ height: 0, opacity: 0 });
const animation = animate(`300ms cubic-bezier(0.4, 0.0, 0.2, 1)`);

export const expandCollapse = trigger('expandCollapse', [
transition(':enter', [collapsed, animation, expanded]),
transition(':leave', [animation, collapsed]),
]);

And this works great to animate an element when it is displayed or hidden via *ngIf:
*ngIf
div *ngIf="isExpanded" @expandCollapse
!-- Content Here --
/div

div *ngIf="isExpanded" @expandCollapse
!-- Content Here --
/div

Apparently, I've never used this with contents that uses a gap, because when I do the animation "snaps" at the beginning and the end. I thought I could solve this by also animating the gap property, but no luck:
gap
gap
const expanded = style({ height: '*', gap: '*', opacity: 1 });
const collapsed = style({ height: 0, gap: 0, opacity: 0 });

const expanded = style({ height: '*', gap: '*', opacity: 1 });
const collapsed = style({ height: 0, gap: 0, opacity: 0 });

How can I smooth this out?
Here is a StackBlitz that demonstrates the current behavior.
StackBlitz
Tags: angular,css-animationsSource of the question:
https://stackoverflow.com/questions/78995847

Question and source license information:
https://meta.stackexchange.com/help/licensing
https://stackoverflow.com/

Видео How to get smooth animation with contents using 'gap' in Angular? канала Emrah KAYA