vue中height从0到auto,子元素高度过渡动画

最新推荐文章于 2025-05-06 14:33:01 发布

常威在打来福~

最新推荐文章于 2025-05-06 14:33:01 发布

阅读量1.8k

点赞数 1

分类专栏：婉约派

本文链接：https://blog.youkuaiyun.com/weixin_41166682/article/details/113542363

版权

婉约派专栏收录该内容

38 篇文章

订阅专栏

本文介绍如何使用iView框架实现按钮点击后的图标切换及内容区域的展开与收起动画效果。通过JavaScript控制DOM样式变化，实现了平滑过渡动画，并避免了因v-if或v-show引起的动画失效问题。

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

参考文章
1.template中,这里用的是iview框架的按钮和icon图标，根据点击按钮切换图标和展开收起动画

<qf-button
  size="small"
  type="text"
  @click="setContent"
>
  <qf-icon
    :type="isActive ? 'angle-double-up' : 'angle-double-down'"
    size="12"
    color="#999"
    class="mr-9"
  />
</qf-button>
<div ref="content">
  <p>详细信息</p>
  <p>子元素信息</p>
</div>

2.data,mounted,methods中

data() {
   return {
   	 isActive: false,
     textheight: 0
   };
 },
mounted() {
    this.$nextTick(el => {
      // 不能通过v-if，v-show来控制元素显示隐藏，否则动画不生效,这里是默认隐藏
      this.textheight = this.$refs.content.offsetHeight + "px";
      this.$refs.content.style.height = 0;
      this.$refs.content.style.overflow = 'hidden';
      // -------------两种情况，如果默认隐藏选上面，默认展示选下面-------------
      // 不能通过v-if，v-show来控制元素显示隐藏，否则动画不生效，
      // 默认显示数据，就要先获取到子元素的高度。
      this.textheight = `${this.$refs.content.offsetHeight}px`;
      this.$refs.content.style.height = this.textheight;
    });
  },
methods: {
    setContent() {
      this.isActive = !this.isActive;
      if (this.isActive) {
        this.$refs.content.style.height = this.textheight;
        this.$refs.content.style.opacity = 1;
      } else {
        this.$refs.content.style.height = 0;
        this.$refs.content.style.opacity = 0;
        this.$refs.content.style.overflow = 'hidden';
      }
    },
  },

参考文章