height高度为auto的transition过渡无效解决

最新推荐文章于 2024-06-06 16:43:13 发布

止语之语

最新推荐文章于 2024-06-06 16:43:13 发布

阅读量2.4k

点赞数 1

分类专栏： vue JavaScript 文章标签： javascript css 前端

本文链接：https://blog.youkuaiyun.com/qq_36685539/article/details/124694803

版权

vue 同时被 2 个专栏收录

18 篇文章

订阅专栏

JavaScript

10 篇文章

订阅专栏

本文介绍了在Vue中处理元素高度过渡的问题，特别是当一方高度设置为auto时，如何通过nextTick获取动态高度并实现平滑过渡。示例代码展示了在卡片点击后如何改变其高度，通过监听点击事件和nextTick回调来更新元素的准确高度，确保过渡效果正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

transition的高度过渡时。height有一方是auto则无效,动态获取变化后的高度重新赋值

卡片点击后高度变高：

<div>
   <a-card class="at-card" v-for="(item,index) in testData" :key="index" @click="openCard(index)" :style="{height:cardFlag===index ? autoHeight :'388px'}">
   /*点击高度auto*/
   </a-card>
</div>

 openCard(i){
  if(this.cardFlag===i){
    this.cardFlag=''
  }else{
    this.cardFlag=i
    this.$nextTick(() => {  //高度变化过渡需要具体高度值
      const nodes = document.querySelectorAll('.at-card') 
      this.autoHeight = nodes[i].scrollHeight + 'px'
    })
  }
},