CSS 支持动画的属性中的 height 属性如下：
height ：yes, as a length, percentage or calc()
即：当 height 的值是 length，百分比或 calc() 时支持 CSS3 过渡。
所以当元素 height : auto 时，是不支持 CSS3 动画的。
对于动态内容，元素的高度应设置为 auto。这样，任何增加或减少的元素高度都将自适应。但也会出现另一个问题：当元素的高度设置为 auto 时，CSS transition 将不起作用。
1、确定高度的时候：
改为max-height
2、不确定高度需要使用js来实现
<template>
<div>
<div>this is a vue file called ulTransition.vue;</div>
<hr />
<div class="flex-div">
<div class="div">
<ul ref="ul" class="showall:true">
<li v-for="i in testnum" :key="i">测试数据{{ i }}</li>
</ul>
</div>
<div>
<button @click="toggle">收缩/放出</button>
</div>
</div>
</div>
</template>
<script>
export default {
namespace: 'ulTransition',
data () {
return {
showli: false,
testnum: 0,
ulheight: 0
}
},
mounted () {
this.testnum = Math.ceil(Math.random() * 10 + 10)
console.log(this.testnum)
this.$nextTick((e) => {
console.log('开始了！')
this.ulheight = this.$refs.ul.offsetHeight + 'px'
this.$refs.ul.style.height = this.ulheight
})
},
methods: {
toggle () {
if (this.showli) {
this.$refs.ul.style.height = this.ulheight
} else {
this.$refs.ul.style.height = 0
}
this.showli = !this.showli
}
}
}
</script>
<style scoped>
.flex-div {
width: 100%;
display: flex;
}
.flex-div .div {
flex: 1;
text-align: center;
}
li {
width: 100px;
background-color: #999;
margin-top: 1px;
}
ul {
background-color: #f2f2f2;
transition: all 0.5s;
overflow: hidden;
}
</style>
