过渡属性 height 设置 auto 不起作用

本文主要是介绍过渡属性 height 设置 auto 不起作用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

transition 在过渡时 无法将 auto 转换为 px，所以设置必须是具体数值，否则没有过渡效果

解决办法

操作 dom 对具体的数值进行转换

<div class="card-detail" v-for="(item, index) in 2" :key="index"><div class="card-head"><div class="i-flex"><div class="card-name">我是套餐名称我是套餐名称看不见我</div><span>卡类型</span></div></div><divclass="card-content"ref="cardRef":style="{ height: expandIndex === index ? autoHeight : '60px' }"><div>项目1</div><div>项目2</div><div>项目3</div><div>项目4</div><span class="expand" @click="expandHandle(index)">{{expandIndex === index ? '收起' : '展开'}}</span></div></div>

const expandIndex = ref(-1)
const cardRef = ref(null)
const autoHeight = ref('auto')
const expandHandle = (index) => {if (expandIndex.value === index) {expandIndex.value = -1} else {expandIndex.value = indexautoHeight.value = cardRef.value[index].scrollHeight + 'px'}
}

.card-detail {position: relative;padding: 20px;margin: 10px 0;border: 1px solid #ccc;.card-head {.card-name {max-width: 220px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}}.card-content {overflow: hidden;transition: height 0.3s linear;}.expand {position: absolute;width: 90%;text-align: center;bottom: 5px;}
}

这篇关于过渡属性 height 设置 auto 不起作用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---