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

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

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

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

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

請檢查上面的代碼片段。