动画，以在 div 保持原位时增加其高度

Question

我正在尝试构建一个自定义控件。我正在尝试做类似的事情此下拉列表。我无法像单击示例时那样放大div，在 div 保持在原位时增加底部和顶部。我很可能会在引导程序的列中使用我的自定义控件。

$().ready(function(){
   
  
 
});

.customddl {
  border:1px solid black;
  width:100%;
  height:50px;
  margin:0;
  transition: height 1s, margin 1s;
}
.customddl:hover {
 
  height:150px;
  margin:10px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div class="row mt-5">
<div class="col-3">
<select>
   <option class="form-control">orange</option>
</select>
</div>
<div class="col-3">
   <div class="customddl"> any option v </div>
</div>
</div>

Answer 1

编辑：只需将transform: translate3d(-50%,-50%,0);添加到您的类中，您将获得所需的结果。

使用 position:absolute 和 bottom:0 并将position:relative添加到其父级

$().ready(function(){
   
  
 
});

.customddl {
  border:1px solid black;
  width:100%;
  height:25px;
  margin:0;
  transition: height 1s, margin 1s;
  transform: translate3d(-50%,-50%,0);
}
.customddl:hover {
 
  height:150px;
  
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div>
<div class="row mt-5">
<div class="col-3">
<select>
   <option class="form-control">orange</option>
</select>
</div>
<div class="col-3">
   <div class="customddl"> any option v </div>
</div>
</div>