Question

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

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

我不知道自己哪里出错了。

＆＃13;

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

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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;
    /* ... */
}

＆＃13;

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

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

Answer 3

您无法为display（read more about animatable properties）制作动画，但可以为opacity属性和browser support is great设置动画。

尽管visibility是可动画的，但这并不是从“隐藏”变为“可见”的最佳方式 - 该属性更多地被发明为可访问性内容。

当我在display：none和display：inline-block之间添加切换时，CSS3转换不起作用

3 个答案: