如何避免在悬停时首先出现内部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; 它应该工作正常。