如何避免内部 div 中的内容在悬停时首先出现

Question

我在悬停时创建了一个扩展的div。这是我创造的小提琴

.outer {
  height: 100px;
  width: 200px;
  border: 1px solid #000;
  overflow: hidden;
  transition: height 0.8s;
  -webkit-transition: height 0.8s;
}
.innerone {
  height: 100px;
}
.outer:hover {
  overflow: visible;
  height: 160px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="outer">
  <div class+="innerone">
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
  </div>
  <div class+="inner">
    <button type="button" class="btn btn-default">Default</button>
  </div>
</div>

  http://jsfiddle.net/ab4Lfdhu/35/    

但问题是扩展div 内的内容甚至在div 完成其完全扩展过渡之前就首先出现。如何避免呢？

Answer 1

对于过渡，您可以使用以下 jQuery 片段来检测动画是否已完成：

$(".outer").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    overflow: visible;
});

小提琴示例：http://jsfiddle.net/db3p5nrv/

Answer 2

.outer:hover {
  overflow: visible;
  height: 160px;
}

删除overflow: visible;它应该工作正常。