Css过渡滑动

Question

我有一个位置按钮，当我点击它时，右侧会出现一个下拉菜单，但我想要一个滑动效果，它将位置图标向左推，并带有过渡效果。任何形式的帮助都将受到高度赞赏。

这是我的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>

Answer 1

这不是完美的代码，只是很快就完成了。但是这样的事情呢？

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

https://jsfiddle.net/j5wncffx/

检查小提琴

Answer 2

＆＃13;

＆＃13;

$(document).ready(function() {
  $("#btnPost").click(function() {
    $('#post-location-conainer select').toggleClass('toggleSelect');
  });
});

＆＃13;

#post-location-conainer select {
  width: 0;
  overflow: hidden;
  transition: width ease-in-out 500ms;
}

#post-location-conainer select.toggleSelect {
  width: 140px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<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">Cam</i>
  </a>

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

  <span id="post-location-conainer">
    <select class="slide-out">
      <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>

＆＃13;

＆＃13;

＆＃13;

请检查上面的代码段。