vue3动画过渡平移

Vue3中的动画过渡平移可以通过transition标签和CSS动画来实现。下面是一个示例：

<template>
  <div>
    <transition name="slide">
      <div v-if="show" class="box"></div>
    </transition>
    <button @click="toggle">Toggle</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  }
};
</script>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}

.slide-enter,
.slide-leave-to {
  transform: translateX(-100px);
}
</style>

在上面的示例中，我们使用了transition标签将要过渡的元素包裹起来，并为其设置了一个name属性，这里我们设置为"slide"。然后，在CSS中定义了两个类名，分别是.slide-enter-active和.slide-leave-active，用来设置过渡动画的持续时间和过渡效果。同时，我们还定义了.slide-enter和.slide-leave-to两个类名，用来设置元素的初始状态和结束状态。

当点击Toggle按钮时，会切换show的值，从而触发过渡效果。当show为true时，元素会从左侧平移进入；当show为false时，元素会从左侧平移离开。