Question

长话短说 - 查看问题标题：）

我正在为我的项目工作导航，最近我遇到了一个奇怪的错误。这里有一点背景：

我想要实现一些自定义动画隐藏/显示行为，所以简单地使用jQuery 1.10 show()和hide()方法就不够了：我在切换课程时有问题的元素。
I类切换称为.hidden。它与类.toReveal一起使用，以避免必须将overflow:hidden;设置为我想要显示的每个项目。我还提到我要动画隐藏/显示行为，所以我会提供相关的CSS：

*{-webkit-transition:0.3s all;-moz-transition:0.3s all;}

.hidden, .hidden * {
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    height:0 !important;
    border-top-width:0 !important;
    border-bottom-width:0 !important;
}

.toReveal, .toReveal * { overflow:hidden; height:auto;  }

所以我获得的经验相当奇怪：当我扩展隐藏元素时 - 过渡按计划进行。但是当我试图隐藏元素时 - 过渡并没有发生。

我发现实际上造成问题的痕迹很少：如果我从代码中移除height:0 !important;行 - 过渡确实会发生，但元素不会崩溃，虽然崩溃是这一点的全部要点：）

这里是简化原型的jsFiddle：http://jsfiddle.net/KCAHe/

查看所需行为的步骤：

点击dev / local
将出现高级按钮：点击沙箱

重现问题的步骤：

点击开发/本地点击高级

Answer 1

选项1：

通常动画/从0过渡到自动不起作用。将height从auto更改为.toReveal CSS类的某个固定值将解决此问题。

.toReveal{
    overflow: hidden;
    height: 30px; /* set height such that it is big enough to accomodate its contents.*/
} 
.toReveal * {
    overflow: hidden;
    height: auto;
}

注意：从height: 0到height: auto的过渡部分已经通过使用选项2为您工作了。但是您可能想看看这个{{3也是。

选项2：（OP根据对评论的反馈使用）

删除overflow: hidden，似乎解决了这个问题。

另外，正如您在OP评论中提到的那样，添加display: block会使其从顶部滑动，因为默认情况下<input>是内联的。

修改后的CSS

.toReveal, .toReveal * {
    display: block;
    height: auto;
}

article

或者，将overflow: visible !important;添加到.hidden, .hidden * CSS似乎也可以。

为什么在显示元素时会发生css转换，但是在隐藏时却没有？

1 个答案: