CODEWITHSUNDEEP
javascriptjquerycsscss-transitions
Anton Matyulkov
Anton Matyulkov

Reputation: 722

Why does css transition occur upon revealing an element, but doesn't upon hiding?

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

Upvotes: 3

Views: 174

Answers (1)

Harry
Harry

Reputation: 89750

Option 1:

Generally animating/transitioning from 0 to auto does not work. Changing the height from auto to some fixed value for the .toReveal CSS class will fix the issue.

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

Note: The transition part from height: 0 to height: auto is already working for you by using Option 2. But you might want to have a look at this article also.

Option 2: (used by OP based on feedback to comments)

Remove the overflow: hidden and it seems to fix the issue.

Also, as you have mentioned in the OP comment, adding display: block will make it slide from top because <input> is inline by default.

Modified CSS

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

Working Fiddle

Alternatively, adding overflow: visible !important; to the .hidden, .hidden * CSS also seems to work.

Upvotes: 1

Related Questions