vue实现进入页

Vue 实现进入页面动画的方法

在Vue中实现进入页面动画可以通过多种方式，包括使用Vue的内置过渡系统、CSS动画库或第三方动画库。以下是几种常见的方法：

使用Vue的过渡系统

Vue提供了<transition>和<transition-group>组件来实现进入和离开的动画效果。可以通过CSS或JavaScript钩子来定义动画。

<transition name="fade">
  <div v-if="show">This will fade in and out</div>
</transition>

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

使用CSS动画库

可以结合Animate.css等CSS动画库来实现丰富的进入动画效果。

<transition
  enter-active-class="animate__animated animate__fadeIn"
  leave-active-class="animate__animated animate__fadeOut"
>
  <div v-if="show">Animated with Animate.css</div>
</transition>

使用第三方动画库

VueUse的useTransition或GSAP等库可以提供更复杂的动画控制。

import { useTransition } from '@vueuse/core'

const source = ref(0)
const output = useTransition(source, {
  duration: 1000,
  transition: [0.75, 0, 0.25, 1]
})

路由过渡动画

对于页面路由切换，可以使用Vue Router的<router-view>结合过渡组件实现。

<router-view v-slot="{ Component }">
  <transition name="fade" mode="out-in">
    <component :is="Component" />
  </transition>
</router-view>

页面加载动画

可以在App.vue中设置全局加载动画，通过监听路由变化来控制动画显示。

const isLoading = ref(true)

onMounted(() => {
  setTimeout(() => {
    isLoading.value = false
  }, 1000)
})

每种方法都有其适用场景，简单过渡效果可使用Vue内置过渡系统，复杂动画可考虑GSAP等专业动画库，路由过渡则适合与Vue Router结合使用。