Question

好的，我正在尝试做的应该很简单（我希望）。

我正在为我的菜单使用wordpress插件，并使用扩展程序使其变得粘稠。我的菜单不在顶部，它位于另一个容器下方，因此当菜单容器到达浏览器屏幕的顶部时（因为它应该）它变得粘稠。

我有一个菜单项，当菜单“不粘”时隐藏，然后当它“粘”时它变得可见。一切都很完美，但是现在我想添加淡入效果，最好只使用CSS3（为了简化集成）。因此，当可见性变得可见时，应该发生淡入淡出效果（请参阅下面的代码，但基本上当菜单变得粘稠时）

菜单项的自定义类是“.jrm-um-sticky-only” 这是我的代码，用于实现显示/消失的菜单项：

#megaMenu ul.megaMenu li.jrm-um-sticky-only{ 
display: block !important;
visibility: hidden !important;
opacity: 0 !important;
}

#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky li.jrm-um-sticky-only{ 
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

我尝试添加：
-webkit-transition: visibility 0.2s linear, opacity 0.2s linear; -moz-transition: visibility 0.2s linear, opacity 0.2s linear; -o-transition: visibility 0.2s linear, opacity 0.2s linear;

到上面的最后一个选择器（不透明度为1），但它不起作用。我也尝试将不透明度设置为0以及上述转换代码，但没有用。

我是新手，如果我的方法有误，我很抱歉。（如果隐藏可见性，我不确定是否需要0的不透明度？）

感谢!!!!

Answer 1

也许您应该将转换规则添加到第一个块（#megaMenu ul.megaMenu li.jrm-um-sticky-only）

CSS3淡入粘性菜单

1 个答案: