Question

我正在尝试创建一个类似于此处（http://themes.fuelthemes.net/bouncy/）的导航菜单进行练习，而且我已经非常接近了但是我看起来并不那么好（动画不那么顺畅）示例中的那个。源代码非常大，我无法找到作者如何在css代码中或通过javascript创建动画。这是我到目前为止所拥有的。有人可以看看，告诉我我做错了什么？

我用来滑动菜单的方法是使用max-height属性，然后使用opacity属性淡入。

批量动画代码：

.menu > li:hover > ul {
    display: block;
    -webkit-transition: max-height 0.2s, opacity 0.2s;
    -moz-transition: max-height 0.2s, opacity 0.2s;
    -ms-transition: max-height 0.2s, opacity 0.2s;
    -o-transition: max-height 0.2s, opacity 0.2s;
    transition: max-height 0.2s, opacity 0.4s;
    max-height: 500px;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}
.dropdown {
    max-height: 0;
    position: absolute;
    list-style: none;
    background: #2c2c2c;
    margin: 0;
    padding: 0;
    overflow: hidden;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

我的JSFiddle： http://jsfiddle.net/cn2fZ/

Answer 1

他们没有使用Transistions代码是什么样的

http://jsbin.com/onituc/1/

或

这http://jsbin.com/onituc/2/edit

两者都是不同的风格

第一个使用mouseenter和mouseleave函数与delay函数结合使用。除了使用fadeIn之外，我们还可以将fadeIn更改为其他内容 show slideDown

第二个仅使用slideUp和slideDown函数以及mouseenter mouseleave

希望这两个中的一个能帮助你，如果你需要更多帮助，请发表评论

带有fadein和高度的下拉菜单

1 个答案: