当我在 display:none 和 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 (read more about animatable properties) 设置动画，但可以为opacity 属性和browser support is great 设置动画。

虽然visibility 是可动画的，但这并不是从“隐藏”到“可见”的最佳方式——该属性更多地是作为一种可访问性而发明的。

Answer 2

正如前面的评论者所说，display 不能动画。那么如何操作宽度呢？这是一个工作示例：

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>

Answer 3

任何display 属性都没有CSS 过渡，包括display:none

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