动画在div保持原位时增加div的高度

Question

我正在尝试构建自定义控件。我正在尝试做类似的事情 this dropdown。我无法按照示例单击时的方式放大div，在div保持原位时增加底部和顶部。我很可能在bootstrap中的列中使用我的自定义控件。

$().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添加到其父级

＆＃13;

＆＃13;

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

＆＃13;

.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;
  
  
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;