前端展开收缩的样式控制

迷小圈2024-03-01 9:47

文章目录

收缩效果

展开效果

javascript 复制代码

<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 的值控制显示的高度及隐藏