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

<template>
  <div class="transition-box" :style="{ width: boxWidth + 'px', height: boxHeight + 'px' }">
    <!-- 内容 -->
  </div>
</template>
 
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
 
const boxWidth = ref(200);
const boxHeight = ref(200);
 
function handleResize() {
  boxWidth.value = window.innerWidth / 2;
  boxHeight.value = window.innerHeight / 2;
}
 
onMounted(() => {
  window.addEventListener('resize', handleResize);
  handleResize(); // 初始化尺寸
});
 
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>
 
<style>
.transition-box {
  transition: width 0.3s, height 0.3s;
  background-color: #42b983;
}
</style>

这段代码使用Vue 3的Composition API创建了一个响应窗口尺寸变化的方形div。当窗口大小变化时，handleResize函数会更新boxWidth和boxHeight的值，并且Vue的响应式系统会自动更新DOM。CSS中的过渡效果会让尺寸的变化看起来平滑自然。