CSS3 transition does not work when I add switch between display:none and display: inline-block

Question

I want to slide my search box from right to left on the click of search button. The search box should be hidden. The transition works fine when I switch the margin-right property from -220px to 0px.

However, when I add the display: none or display: inline-block property, it does not work. I also tried visibility property. It slides, but I want it to slide from the start of the button and not behind the button.

I don't know where I am going wrong.

Please help. Please check the jsfiddle here...

$(document).on("click", "#searchtoolbar", function() {
  var hasclass = $("#search").hasClass("searchshow");
  if (!hasclass) {
    $("#search").addClass("searchshow").focus();
  } else {
    $("#search").removeClass("searchshow");
  }
});

@import "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";
#inputbar {
  border-color: red;
  list-style: none;
}
#search {
  background: #007F64;
  /*display:none;*/ /*It does not work with the transition when I do this.*/
  visibility: hidden;
  right: 300px;
  color: white;
  position: absolute;
  border: none;
  top: 18px;
  height: 27px;
  width: 177px;
  padding: 8px 4px;
  margin-right: -220px;
  transition: margin-right;
  transition-duration: .5s;
}
#search.searchshow {
  border-color: #41A940;
  outline: none;
  margin-right: 100px;
  visibility: visible;
  /* display:inline-block; */ /* The transition does not work if I do so*/
}
#searchtoolbar {
  background: #007F64;
  color: white;
  position: absolute;
  right: 260px;
  top: 18px;
  border: none;
  font-size: 18px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<li id="inputbar">
  <input type="search" id="search" placeholder="What are you looking for?">
</li>
<button id="searchtoolbar" type="submit" aria-label="Search button">
  <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>

possible duplicate of [Transitions on the display: property](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — Oriol, Jan 26 '15 at 20:00

Kevin Pei · Answer 1 · 2015-01-26T19:50:42.880

0

There is no CSS transition for any display property, including display:none

If you need to animate that transition, you will need to manually change whatever property you need to animate first, then set a delay in javascript so you can set it to display:none after the CSS transition completes.

edited Jan 26 '15 at 19:50

answered Jan 26 '15 at 19:41

Kevin Pei

5,800
7
38
55

1

It's not only `display: none`, it's the whole property `display` which is not animatable. – Oriol Jan 26 '15 at 19:46
For a reason, I do not want to do it through javascript. I believe we can make some use of overflow or visibility property. Just not sure how. Thanks.. – Ron Jan 26 '15 at 21:15

score 0 · Answer 2 · edited Jan 26 '15 at 19:51

As the previous commenter said, display can't be animated. What about manipulating the width instead? Here's a working example:

Updated fiddle

#search {
    /* ... */
    width: 0;
    padding: 8px 0;
    transition: all; /* Width and padding */
    transition-duration: .5s;
    /* ... */
}
#search.searchshow {
    /* ... */
    padding: 8px 4px;
    width: 177px;
    /* ... */
}

$(document).on("click", "#searchtoolbar", function() {
  var hasclass = $("#search").hasClass("searchshow");
  if (!hasclass) {
    $("#search").addClass("searchshow").focus();
  } else {
    $("#search").removeClass("searchshow");
  }
});

@import "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";
#inputbar {
  border-color: red;
  list-style: none;
}
#search {
  background: #007F64;
  right: 300px;
  color: white;
  position: absolute;
  border: none;
  top: 18px;
  height: 27px;
  width: 0;
  padding: 8px 0;
  transition: all; /* Width and padding */
  transition-duration: .5s;
}
#search.searchshow {
  border-color: #41A940;
  outline: none;
  padding: 8px 4px;
  width: 177px;
}
#searchtoolbar {
  background: #007F64;
  color: white;
  position: absolute;
  right: 260px;
  top: 18px;
  border: none;
  font-size: 18px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<li id="inputbar">
  <input type="search" id="search" placeholder="What are you looking for?">
</li>
<button id="searchtoolbar" type="submit" aria-label="Search button">
  <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>

It works man! Thanks a lot. However, is there a way to do it through 'overflow:hidden' or through visibility property. I tried a lot. It would be good to know. Thanks again Jack...:) — Ron, Jan 26 '15 at 21:03

score 0 · Answer 3 · answered Jan 26 '15 at 21:24

You can't animate display (read more about animatable properties) but you can animate the opacity property, and browser support is great.

Although visibility is animatable, this isn't really the best way to go from 'hidden' to 'visible' - that property was invented more as an accessibility thing.

CSS3 transition does not work when I add switch between display:none and display: inline-block

3 Answers3