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>

请检查上面的代码片段。