Hi community,

I added animation to Dropdown widget.

.dropdown.is--hidden .dropdown-content {
    transition: all 500ms ease-in-out;
    transform: scaleY(0);
}

.dropdown.is--visible .dropdown-content {
    transform: scaleY(1);
}

When I expand dropdown - all works, content transforms from scaleY(0) to scaleY(1), but when I collapse - content just dissapears without animation. What am I doing wrong?

Hello Aliaksandr,

Can you try to change the second class to this?

.dropdown.is--visible .dropdown-content {
    transition: all 500ms ease-in-out;
    transform: scaleY(1);
}

Try to add transition: all 500ms ease-in-out;


I found this example: https://css-tricks.com/ease-out-in-ease-in-out/


Hope it helps.

BR,

Luis


Hi Luís Cardoso,

I try to add transition to .is--visible too. But still out animation not working

Aliaksandr Kasko wrote:

Hi Luís Cardoso,

I try to add transition to .is--visible too. But still out animation not working

Hi, Can you share the .oml file (module), to test it?


Thanks


Luís Cardoso wrote:

Hi, Can you share the .oml file (module), to test it?

Hi, I created test app. See attachment

Solution

Aliaksandr Kasko wrote:

Luís Cardoso wrote:

Hi, Can you share the .oml file (module), to test it?

Hi, I created test app. See attachment

Hi!

I think is solved, please find the OML in attachment.

You need also to add the transition in the dropdown-content:

.dropdown .dropdown-content .dropdown-content-list {
    transition: all 500ms ease-in-out;
    white-space: nowrap;
}


BR,

Luis

Solution

Luís Cardoso wrote:

You need also to add the transition in the dropdown-content:

.dropdown .dropdown-content .dropdown-content-list {
    transition: all 500ms ease-in-out;
    white-space: nowrap;
}

Oh, thanks a lot!

???????? ?? ??????? you're breathtaking

Aliaksandr Kasko wrote:

Luís Cardoso wrote:

You need also to add the transition in the dropdown-content:

.dropdown .dropdown-content .dropdown-content-list {
    transition: all 500ms ease-in-out;
    white-space: nowrap;
}

Oh, thanks a lot!

???????? ?? ??????? you're breathtaking

You are Welcome!

Luís