前端展开收缩的样式控制

<section :class="`w-full ${arrowDown ? 'h-39px overflow-hidden' : ''}`">
      <!-- 实际选项 -->
      <el-row class="zlc-tag-row">
        <el-col
          v-for="(tag, index) in [defaultOption, ...tagList]" :key="index" class="zlc-tag mr-2 mb-2"
          :class="{ 'zlc-tag__checked': tag.checked }" :title="tag.label" :xs="12" :sm="6" :md="4" :lg="2" :xl="1"
          @click.stop="index === 0 ? handleSelectDefault() : handleSelect(tag)"
        >
          <span class="flex justify-center ">{{ tag.label }}</span>
        </el-col>
      </el-row>
    </section>
    <el-icon :class="`${arrowDown ? 'rotate-fade-reverse' : 'rotate-fade'} cursor-pointer block`">
      <ArrowDownBold @click="arrowDown = !arrowDown" />
    </el-icon>

// js
const arrowDown = ref<boolean>(true)

// CSS动画
.rotate-fade {
  transform: rotate(180deg);
  transition: transform .25s linear;
}

.rotate-fade-reverse {
  transform: rotate(0deg);
  transition: transform .25s linear;
}

重点是通过arrowDown 的值控制显示的高度及隐藏

原文地址：https://blog.csdn.net/wang13679201813/article/details/136338003

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！