Hey there! I am customizing the Dawn theme, mostly learning Shopify/Liquid. I wanted to add a fade-in/fade-out animation to the menu bar. In editing component-mega-menu.css
, I was able to get the fade-in to work by adding
.mega-menu[open] .mega-menu__content {
visibility: visible;
opacity: 1;
transform: translateY(0);
**transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;**
}
But it won’t fade out, and if I try adding any transition attributes to .mega-menu__content
or .js .mega-menu__content
, it doesn’t fade out and breaks the fading in. I was wondering if it had something to do with the way the components use the transform property, but CSS is not my strong suit so I’m stumped.
Thanks!