vue3 点击按钮 元素从右到左移动

在 Vue3 中，可以通过使用 `transition` 组件和 CSS3 动画来实现元素从右到左移动的效果。

首先，在模板中定义一个按钮和一个需要移动的元素：

<template>
  <div>
    <button @click="move">点击移动</button>
    <transition name="move">
      <div v-if="isMoved" class="box"></div>
    </transition>
  </div>
</template>

然后，在样式中定义移动的动画：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: 0;
  right: 0;
  animation: move 1s;
}

@keyframes move {
  from {
    right: 0;
  }
  to {
    right: 100%;
  }
}

.move-enter-active,
.move-leave-active {
  position: absolute;
}

.move-enter,
.move-leave-to {
  right: 0;
}

最后，在组件中定义 `isMoved` 变量和 `move` 方法来控制元素的移动：

<script>
export default {
  data() {
    return {
      isMoved: false
    }
  },
  methods: {
    move() {
      this.isMoved = true
    }
  }
}
</script>

这样，点击按钮后，元素就会从右到左移动。