3

Long story short - check the question title :)

I'm working on a nav for my project, and recently I've encountered a strange error. Here's a little background:

  1. I want some custom animated hide/reveal behavior implemented, so simply using jQuery 1.10 show() and hide() methods won't suffice: I'm toggling a class on the element in question.

  2. The class I toggle is called .hidden. It's used along with the class .toReveal to avoid having to set overflow:hidden; to each of the items I want revealed. I've also mentioned I'm going for animated hide/reveal behavior, so I'll provide the relevant 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;  }

So the experience I get is rather strange: when I expand the hidden element - the transition is going as planned. But when I try to hide the element - the transition doesn't happen.

I've found little traces of what's actually causing the trouble: if I remove height:0 !important; line from the code - the transition does happen, but the element doesn't collapse, while collapsing is the whole point of this :)

Here's a jsFiddle to the simplified prototype: http://jsfiddle.net/KCAHe/

Steps to see the desired behavior:

  1. Click on dev/local
  2. Advanced button will appear: click on sandbox

Steps to reproduce the issue:

  1. Click on dev/local Keep clicking on Advanced
4

1 回答 1

1

选项1：

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

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

注意：height: 0使用选项 2，从to的过渡部分height: auto已经为您工作。但您可能还想看看这篇文章。

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

删除overflow: hidden它似乎可以解决问题。

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

修改后的 CSS

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

工作小提琴

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

于 2013-08-31T03:42:36.217 回答