Css Transition只工作一次

Question

我创建了一个过渡效果，当我点击位置图标时会出现一个选择框，它会将位置图标推到左侧。但问题是它只在firefox中工作，但在chrome中只工作一次。我不知道为什么会这样。任何形式的帮助都将受到高度赞赏。

这是我的HTML代码

  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right pad-top">
  <a href="#">
  <i class="fa fa-camera" aria-hidden="true" id="capture_image_01"></i>
  </a>

  <a href="#">
  <i class="fa fa-map-marker" aria-hidden="true" id="location-show-hoide-point"></i>
  </a>

  <span id="post-location-conainer" style="display:none">
  <select>
  <option value="No Value Selected">Select Target City</option>
  <option value="City 1">City 1</option>
  <option value="City 2">City 2</option>
  </select>
  </span>

  <input class="btn btn-primary btn-xs close-button" type="button" value="Post" id="btnPost" />
  </div>

这是我的css

#post-location-conainer select{
  overflow: hidden;
  width: 0px;
  transition: all 1s ease;
}

#post-location-conainer select.open{
  width: 150px;
}

这是JS

    <script>
$( document ).ready(function() {
    $(document).on('click','#location-show-hoide-point',function (){
        $('#post-location-conainer select').toggleClass('open');
    });
});

</script>

Answer 1

您必须稍微更改您的代码：

代码段

$(document).ready(function() {
  $('#location-show-hoide-point').on('click', function() {
    $('span').toggleClass('open');
  });
});

.dib-elements a {
  display: inline-block;
  vertical-align: middle;
}

span {
  display: inline-block;
  width: 0px;
  -moz-transition: all 1s ease 0s;
  -webkit-transition: all 1s ease 0s;
  transition: all 1s ease 0s;
  overflow: hidden;
  vertical-align: middle;
}

.open {
  width: 135px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right pad-top dib-elements">
  <a href="#">
    <i class="fa fa-camera" aria-hidden="true" id="capture_image_01"></i>
  </a>

  <a href="#">
    <i class="fa fa-map-marker" aria-hidden="true" id="location-show-hoide-point"></i>
  </a>
  <span>
  <select id="post-location-conainer">
  <option value="No Value Selected">Select Target City</option>
  <option value="City 1">City 1</option>
  <option value="City 2">City 2</option>
  </select></span>

  <input class="btn btn-primary btn-xs close-button" type="button" value="Post" id="btnPost" />
</div>

  

不需要使用$(document).on('click','#location-show-hoide-point',function (){...，因为它用于精细处理jQuery事件，或者更好地说明DOM加载时元素何时不存在。

     

当您使用<span id="post-location-conainer" style="display:none">来操纵toggleClass时，无需使用width即内联样式。

     

在将inline DOM用于空格，分割，元素包装时，请务必将inline-block DOM定义为block或Gradle。