Animate submenu with transform and display properties

Asked Jul 15 '20 at 10:20

Active Jul 15 '20 at 10:20

Viewed 17 times

Ok so I've got this submenu in the sidebar, but I run into an issue when it comes to animating it. I have tried to use the transform property in combination with display: none;, but still it opens instantly. If I use only transform, it takes up the space… Is there any way around this, with transform or without it?

.hide-submenu {
    display: none;
    transform: scaleY(0);
}

.show-submenu {
    transform: scaleY(1);
}

Here's a Stackblitz example: https://stackblitz.com/edit/angular-bvk6ku?file=src%2Fapp%2Fapp.component.ts

asked Jul 15 '20 at 10:20

Smithy

what animation do you want to make exactly? on your stackblitz your animation works fine. – Tudor Alexandru Jul 15 '20 at 10:22
@TudorAlexandru same as the existing animation, but when it's closed it should not take the space under the submenu – Smithy Jul 15 '20 at 10:23
Everything should slide down – Smithy Jul 15 '20 at 10:23
1

https://stackblitz.com/edit/angular-xq2z48 – enno.void Jul 15 '20 at 10:26
Well this is great...thank you @enno.void! – Smithy Jul 15 '20 at 10:30

Animate submenu with transform and display properties

0 Answers0