3

请不要将此标记为重复，我不是在问什么更好用。前几天我做了一个滑出式导航栏，我使用 jQueryslideToggle()来让动画工作。我尝试使用 CSS 过渡，但失败得很惨。问题是，是否有可能在没有 jQuery（或任何 JS，就此而言）的情况下通过转换（确切地说是对 JSfiddle 的影响）获得这种效果？如果是这样，怎么做？

4

3 回答 3

3

当然可以，但是使用这种方法，您将不得不在top最初的位置上玩弄（它是否定的）

重要部件

#nav li ul {
    position: absolute;
    margin-left: -1px;
    list-style: none;
    padding: 0;
    top: -245px;
    -webkit-transition:all 1s ease;
    -moz-transition:all 1s ease;
}

#nav li:hover ul {
    visibility: visible;
    display:block;
    top: 45px;
    z-index:-999; /* This is to make the menu be behind the nav bar*/
}

#nav li ul:hover {
    display: block;
}

演示

另请查看此幻灯片效果的简化版本。

于 2012-06-13T16:14:27.223 回答
2

是的，这是可能的（这里有一个例子：http: //jsfiddle.net/DvVLw/3/）例如，如果您的项目高度最初设置为0并且您为每个子菜单指定在动画结束时要达到的确切高度，因为 CSS3 动画（还）不能与auto关键字一起工作（所以动画 from 0toauto是不可能的）。

当然，当您的菜单是动态的并且您以前不知道它将包含多少项目时，高度当然很难判断

于 2012-06-13T16:11:55.213 回答
0

而是使用height 0以及auto为什么不使用 CSS transform:translateY()with transition: transform?

使用该解决方案有什么缺点吗？

于 2018-01-12T11:11:47.273 回答