高度不固定的元素使用vue的transition效果

可以使用 max-height 代替 height。

只要我们设置一个肯定比元素自增长大的高度值就可以了。当然，因为是根据 max-height 值进行过渡效果，所以最好不要大得离谱，否则动画效果不理想。

<transition name="fade-height">
   <div class="filterInner-wraper">我是内容</div>    
</transition>

.filterInner-wraper{
	overflow: hidden;
}

// fade-height
.fade-height-enter-active{
  transition:all 1s;
  opacity: 1; 
  max-height: 1000px;
}
.fade-height-leave-active{
  transition:all 1s;
  opacity: 0; 
  max-height: 0px;
}
.fade-height-leave{
  opacity: 0; 
  max-height: 1000px;
}
.fade-height-enter{
  opacity: 0; 
  max-height: 0px;
}

这里要注意，maxHeight的值越大，它0.5s所要变化的高度就越多，即变化的速度越快~~~

在VUE中遇到了一个过渡问题

138.高度为auto的元素使用vue的transition效果

如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画