Nuxt3 使用animate.css来实现页面切换过渡效果

首先，如果两个page分别在不同的layout下，是无法使用pageTransition来实现切换效果的，这时候需要使用layoutTransition来实现切换效果

这里采用npm package的方式安装animate.css，当然采用cdn的形式也是可以的

npm i animate.css

然后在 app.vue中导入

<script setup>
import "animate.css";
</script>

再然后在nuxt.config.js中配置切换效果

export default defineNuxtConfig({
    app: {
        layoutTransition: { name: "page", mode: "out-in" },
    },
});

这里的name是可以随便写的，接下来要用到，mode表示动画执行的模式，pageTransition 的 mode 属性用于定义过渡动画的切换方式。它有两个主要选项：

1. out-in 先执行出场动画再执行入场动画

2. in-out 先入场再出场

然后再在app.vue中定义transition class

<style>
.page-enter-active {
    animation: fadeIn ease-in 0.3s;
}
.page-leave-active {
    animation: fadeOut ease-out 0.3s;
}
</style>

这样就结束了