当我在显示:无和显示:内联块之间添加切换时，CSS3 过渡不起作用

Question

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

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

我不知道我哪里出错了。

请帮忙。请在这里查看 jsfiddle...

$(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。

Answer 2

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

更新的小提琴

#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进行动画处理（阅读有关可动画属性的更多信息），但可以对 opacity 属性进行动画处理，并且浏览器支持很棒。

尽管visibility是可动画的，但这并不是从"隐藏"到"可见"的最佳方式 - 该属性更多地是作为可访问性的东西而发明的。