在 Vue3 的 TypeScript 文件中，可以使用 <Transition> 组件来实现页面加载动画。你可以在 <template> 中定义一个元素，并在该元素上使用 v-enter 和 v-leave 插槽，来定义元素进入和离开视图时的动画效果。

以下是一个简单的示例：

<template>
  <div id="app">
    <transition name="fade">
      <div v-if="isLoading">
        <h1>加载中...</h1>
      </div>
      <div v-else>
        <h1>欢迎来到 Vue3 的世界！</h1>
      </div>
    </transition>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
  data() {
    return {
      isLoading: true
    }
  },
  created() {
    setTimeout(() => {
      this.isLoading = false
    }, 3000) // 模拟页面加载完成的时间
  }
})
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

在这个示例中，我们使用了 fade 作为过渡名称，并定义了一个简单的淡入淡出动画。当页面加载时，isLoading 为 true，所以显示 "加载中..." 的元素会逐渐淡入。当页面加载完成后，isLoading 为 false，所以显示 "欢迎来到 Vue3 的世界！" 的元素会逐渐淡出。

你可以根据需要修改动画的效果和时长。请注意，由于 <Transition> 是一个响应式组件，所以你需要在 <template> 中使用 v-if 或 v-else-if 来控制元素的显示，以确保动画能够正确触发。