vue3进入页面实现动画效果

在Vue 3中，可以使用<transition>元素和CSS动画来实现页面进入时的动画效果。以下是一个简单的示例：

1. 定义CSS动画：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

2. 在Vue 3组件中使用<transition>：

<template>
  <transition name="fade">
    <div v-if="isVisible" class="box">
      页面内容
    </div>
  </transition>
</template>
 
<script setup>
import { ref } from 'vue';
 
const isVisible = ref(false);
 
// 在某个时刻，比如mounted钩子中设置isVisible为true来触发动画
// mounted() {
//   isVisible.value = true;
// }
</script>
 
<style>
/* 上面定义的CSS动画 */
</style>

在这个例子中，.box元素将会在isVisible从false变为true时通过淡入淡出动画进入页面。你可以在合适的时机（比如页面加载完成后）将isVisible的值设置为true来触发动画。