Nuxt路由动画效果如何实现长尾词的页面过渡动画？

本文共计1145个文字，预计阅读时间需要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文件就可以了。