手风琴效果，展开时根据内容自适应高度即从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 */}
如果觉得《css height为auto的transition过渡效果--max-height》对你有帮助，请点赞、收藏，并留下你的观点哦！
