css height为auto的transition过渡效果--max-height

手风琴效果，展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto; 此时设置transition不会产生效果, 原因是 transition 无法将 ()px 变为不是具体数值的 auto

解决方法：

设置max-height，max-height尽可能最大，transition也要设置max-height；
我一开始写的height,一直没有效果。

<div @click.stop="getmorerule()">更多规则</div>
<div class="rulelist">
    <div class="ruli" v-for="(vo,index) in 4" :key="index">
         <div>可免费使用包间</div>
     </div>
 </div>

getmorerule(){
    document.querySelector('.rulelist').style.cssText="height:auto;max-height:50vh;visibility:visible";
},

.rulelist{
	height: 0;visibility: hidden;max-height:0;
	transition: max-height .5s ease-in-out;
	-moz-transition: max-height .5s ease-in-out;	/* Firefox 4 */
	-webkit-transition: max-height .5s ease-in-out;	/* Safari 和 Chrome */
	-o-transition: max-height .5s ease-in-out;	/* Opera */
}