用vue3写一个方块移动的动画

当使用Vue 3时，你可以使用Vue的过渡动画和动态绑定样式来实现一个方块移动的动画。下面是一个简单的例子：

首先，创建一个Vue组件，命名为`SquareAnimation`：

<template>
  <div class="square" :style="{ transform: `translate(${position.x}px, ${position.y}px)` }"></div>
</template>

<script>
export default {
  data() {
    return {
      position: {
        x: 0,
        y: 0
      }
    };
  },
  mounted() {
    this.moveSquare();
  },
  methods: {
    moveSquare() {
      // 设置方块的移动动画
      setInterval(() => {
        this.position.x = Math.random() * (window.innerWidth - 100);
        this.position.y = Math.random() * (window.innerHeight - 100);
      }, 1000);
    }
  }
};
</script>

<style>
.square {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease-in-out;
}
</style>

在上述代码中，我们使用了`position`对象来跟踪方块的位置，并且通过动态绑定样式的方式将其应用到方块元素上。在`mounted`生命周期钩子中，我们调用`moveSquare`方法来启动方块的移动动画。在`moveSquare`方法中，我们使用了`setInterval`函数来每隔一秒更新方块的位置，从而实现移动效果。

最后，你可以在其他组件中使用`SquareAnimation`组件来展示方块移动的动画效果：

<template>
  <div>
    <SquareAnimation />
  </div>
</template>

<script>
import SquareAnimation from './SquareAnimation.vue';

export default {
  components: {
    SquareAnimation
  }
};
</script>

在上述代码中，我们将`SquareAnimation`组件作为子组件引入，并在模板中使用它来展示方块移动的动画。

这样，当你渲染这个组件时，你将看到一个随机移动的红色方块。你可以根据自己的需求修改方块的样式和动画效果。