Nuxt框架中如何实现路由切换的动画效果示例？

本文共计1117个文字，预计阅读时间需要5分钟。

Nuxt.js实现路由动画效果，包括全局和页面级两种方法。全局动画针对所有页面切换，页面级动画则针对单个页面制作。全局路由动画默认使用page组件进行设置，例如：现在使用路由动画进行页面切换。

路由的动画效果，也叫作页面的更换效果。Nuxt.js提动两种方法为路由提动动画效果，一种是全局的，一种是针对单独页面制作。

全局路由动画

全局动画默认使用page进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个main.css文件。

/assets/css/main.css

.page-enter-active,.page-leave-active{ transition: opacity 2s; } .page-enter,.page-leave-active{ opacity: 0; }

然后在nuxt.config.js里加入一个全局的css文件就可以了。