Vuejs高度的改变动画探索：折叠面板Collapse组件的优秀实现方案

<template>
  <transition v-bind="listeners">
    <!-- 当visible的值发生改变时，过渡组件的监听器就会触发 -->
    <div v-show="visible" class="x-collapse-transition">
      <slot />
    div>
  transition>
template>
<script setup>
defineProps({ visible: Boolean })
const listeners = {
  // 元素由隐藏变为可见
  onEnter ( el) {
    el.style.height = 'auto' // 将高度设为auto，是为了获取该元素的计算高度
    const endHeight = window.getComputedStyle(el).height // 计算高度
    el.style.height = '0px' // 将高度再设置为0
    el.offsetHeight // 强制重绘，重绘后再改变高度才会产生动画
    el.style.height = endHeight // 设置为计算高度
  },
  onAfterEnter ( el) {
    el.style.height = null // 过渡进入之后，将高度恢复为null
  },
  // 元素由可见变为隐藏
  onLeave ( el) {
    el.style.height = window.getComputedStyle(el).height // 计算高度
    el.offsetHeight // 强制重绘，重绘后再改变高度才会产生动画
    el.style.height = '0px' // 将高度设置为0
  },
  onAfterLeave ( el) {
    el.style.height = null // 过渡离开之后，将高度恢复为null
  }
}
script>
<style lang="scss">
  .x-collapse-transition {
    overflow: hidden;
    transition: height .22s ease-in-out;
  }
style>

<template>
  <div :class="[cls, { 'is-active': isActive }]">
    <div :class="`${cls}_header`" @click="onToggle">
      <div :class="`${cls}_title`">
        <slot name="title">{{ title }}slot>
      div>
      <i :class="['x-icon-arrow-right', `${cls}_arrow`, { 'is-active': isActive }]">i>
    div>
    <x-collapse-transition :visible="isActive">
      <div :class="`${cls}_content`">
        <slot />
      div>
    x-collapse-transition>
  div>
template>
<script setup>
import { computed, inject } from 'vue'
import { COLLAPSE_INJECT_KEY } from '../../constants' // 当它是个字符串常量就行
import { N, S, B } from '../../types' // N: Number, S: String, B: Boolean
import { genKey } from '../../utils' // 生成唯一性的数值key，之前的文章中有源码
import XCollapseTransition from './CollapseTransition.vue' // 折叠动画组件
const props = defineProps({
  name: [S, N],
  title: S,
  disabled: B
})
const collapse = inject(COLLAPSE_INJECT_KEY, '') // 注入折叠面板组件提供的一些属性和方法
const cls = 'x-collapse-item'
const idKey = computed(() => props.name || genKey()) // 如果没提供name，我们生成一个key
const isActive = computed(() => collapse.includes(idKey.value)) // 是否展开状态
function onToggle () { // 内容可见时隐藏，隐藏时可见
  collapse.updateModel(idKey.value)
}
script>

@import './common/var.scss';
.x-collapse-item {
  font-size: 13px;
  background-color: #fff;
  color: $--color-text-primary;
  border-bottom: 1px solid $--border-color-lighter;
  &:first-child {
    border-top: 1px solid $--border-color-lighter;
  }
  &_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    cursor: pointer;
  }
  &_content {
    line-height: 1.8;
    padding-bottom: 25px;
  }
  &_arrow {
    margin-right: 8px;
    transition: transform .2s;
    &.is-active {
      transform: rotate(90deg);
    }
  }
}

<template>
  <div class="x-collapse">
    <slot />
  div>
template>
<script setup>
import { provide, reactive, ref, watch } from 'vue'
import { COLLAPSE_INJECT_KEY } from '../../constants' // 一个字符串常量
import { S, B, A } from '../../types' // 参看CollapseItem组件
const props = defineProps({
  modelValue: [S, A], // Vue3使用modelValue取代了Vue2中的value
  accordion: B // 是否手风琴模式，手风琴模式只能有1个面板项是展开状态
})
const emit = defineEmits(['update:modelValue', 'change'])
function emitValue (v) {
  emit('update:modelValue', v) // 与props.modelValue结合实现双向数据绑定
  emit('change', v)
}
const model = ref(props.modelValue)
watch(() => props.modelValue, v => model.value = v)
provide(COLLAPSE_INJECT_KEY, { // 提供2个方法用于注入子组件，给子组件调用
  includes (v) { // 根据面板的key，判断是否包含该面板项
    return props.accordion ? model.value === v : (model.value || []).includes(v)
  },
  updateModel (v) { // 更新面板项的内容折叠和展开状态
    const { value } = model
    if (props.accordion) {
      model.value = value === v ? null : v
      emitValue(model.value)
    } else {
      if (!value) model.value = []
      const index = model.value.indexOf(v)
      index > -1 ? model.value.splice(index, 1) : model.value.push(v)
      emitValue(model.value)
    }
  }
})
script>