Question

请不要将此标记为重复，我不是在问什么是更好用。 I made a slideout navbar the other day，我使用jQuery slideToggle()来动画制作。我试过使用CSS过渡，但我失败了。问题是，如果没有jQuery（或者根本没有任何JS），是否有可能通过转换（确切地说是对JSfiddle的影响）获得该效果？如果是这样，怎么样？

Answer 1

当然可以，但是使用这种方法，您最初必须使用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;
}

Demo

同时检查this以获取幻灯片效果的简化版本。

Answer 2

是的，这是可能的（这是一个例子：http://jsfiddle.net/DvVLw/3/），例如如果您的项目高度最初设置为0，并且您为每个子菜单指定了动画结束时要达到的确切高度，因为CSS3动画无法（尚未）使用auto关键字（因此从0到auto的动画是不可能的。

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

Answer 3

而是使用height 0和auto为什么不将CSS transform:translateY()与transition: transform一起使用？

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

JQuery slideToggle（）vs CSS动画

3 个答案: