使用vue3写一个自动获取宽度高度变化的过渡动画

使用 vue3 写一个自动获取宽度高度变化的过渡动画可以这样做：

1. 在组件中定义一个布尔型的变量来控制过渡动画的开始和结束，例如：

data() {
  return {
    animate: false
  }
}

2. 在组件中定义一个计算属性来自动获取元素的宽度和高度，例如：

computed: {
  elementSize() {
    const el = this.$refs.element
    return {
      width: el.offsetWidth,
      height: el.offsetHeight
    }
  }
}

3. 在模板中使用过渡组件来控制元素的宽度和高度变化时的动画效果，例如：

<template>
  <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
    <div ref="element" v-bind="elementSize" class="element">
      <!-- 这里是元素的内容 -->
    </div>
  </transition>
</template>

4. 在组件的 methods 中定义过渡组件的钩子函数来控制动画的开始和结束，例如：

methods: {
  beforeEnter(el) {
    // 在动画开始之前，设置元素的初始状态
    el.style.width = '0px'
    el.style.height = '0px'
  },
  enter(el, done) {
    // 在动画过程中，改变元素的宽度和高度
    el.style.width = `${this.elementSize.width}px`
    el.style.height = `${this.elementSize.height}px`
    // 动画结束后调用 done()
    done()
  },
  afterEnter(el) {
    // 在动画结束之后，设置元