I’m making a navigation bar. Visibility condition is set to the dropdown container, which will be visible when I hover over to a menu element. It works fine but the dropdown reveals instantly. Is there any way to animate the dropdown, like fade in or add any other transformation when I hover over the menu element?
I made the transition with the opacity setting. It looks fine. But how can I make a fade out effect? I set a mouse leave interaction which is toggle the variant back to the default state. But that shows it instantly. Is there any way to fix that too @yang?
The transition itself works now, but the content looks bad at fade out. I made a video about it. The default variant’s contents will show up on fade out. Those contents are within the dropdown container which opacity was set to zero in the default variant. The contents are visible. If I set the content’s opacity to zero as well or hide them in the default one, the transition is not working anymore. @yang
One more thing I noticed. On the published page I can see the mouse pointer changes when I’m just navigating on the website. Probably because the dropdown element is not hidden, just an opacity set to zero so the mouse reflects to the dropdown menu elements inside.
The first half of the problem is solved. I made a showmenu variant, and conditional visibility is set for each content. Now it looks perfect when the mouse leaves, no jumping contents anymore.
My only problem is that the pointer changes/links shown when I hover over the mouse where the hidden menu is. I solved a part of it with an empty container which is the default item, so there is no problem when I first load the page and navigating. But when I hover over a menu element and then the mouse leaves and the dropdown fades out, the pointer can interact the latest dropdown elements.
If I set a second mouse leave interaction to the dropdown to set the current menu items back to the empty container (what solves this hovering issue) the fade out animation stops working. Probably because that is a visibility setting.