jquery - 当我在显示 :none and display: inline-block 之间添加切换时，CSS3 过渡不起作用

Question

我想在点击搜索按钮时从右向左滑动我的搜索框。应该隐藏搜索框。当我将 margin-right 属性从 -220px 切换到 0px 时，转换工作正常。

但是，当我添加 display: none 或 display: inline-block 属性时，它不起作用。我还尝试了 visibility 属性。它会滑动，但我希望它从按钮的开头而不是按钮后面滑动。

我不知道我哪里错了。

请帮忙。 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>

Answer 1

任何 display 属性都没有 CSS 转换，包括 display:none

如果您需要为该过渡设置动画，则需要先手动更改需要设置动画的任何属性，然后在 javascript 中设置延迟，以便在 CSS 之后将其设置为 display:none转换完成。