利用Nuxt实现一个路由动画效果
导读：本文共3208.5字符，通常情况下阅读需要11分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 路由的动画效果，也叫作页面的更换效果。Nuxt.js提动两种方法为路由提动动画效果，一种是全局的，一种是针对单独页面制作。全局路由动画全局动画默认使用page进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个main.css文件。/assets/css/main.css.page-enter... ...
目录
(为您整理了一些要点),点击可以直达。
路由的动画效果，也叫作页面的更换效果。Nuxt.js提动两种方法为路由提动动画效果，一种是全局的，一种是针对单独页面制作。
全局路由动画
全局动画默认使用page进行设置，例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果。我们可以先在根目录的assets/css下建立一个main.css文件。
/assets/css/main.css
然后在nuxt.config.js里加入一个全局的css文件就可以了。
这时候在页面切换的时候就会有2秒钟的动画效果了，但是你会发现一些页面时没有效果，这是因为你没有使用<nuxt-link>组件来制作跳转链接。你需要进更改。
比如改成如下：
<nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link>
改过之后你就会看到有动画效果了。
单独设置页面动效
想给一个页面单独设置特殊的效果时，我们只要在css里改变默认的page，然后在页面组件的配置中加入transition字段即可。例如，我们想给about页面加入一个字体放大然后缩小的效果，其它页面没有这个效果。
在全局样式assets/main.css中添加以下内容。
然后在about/index.vue组件中设置
补充知识：vue-ssr框架nuxt填坑
Nuxt.js 1.0.0 初始化与依赖包安装
vue init nuxt/started
npm install
npm run dev
npm run dev 报错
解决错误
将node 升级到 node8.12.0
升级到nuxt-edge Nuxt.js 2.0
1、运行 npm run dev报错
2、修正错误:编辑nuxt.conf.js文件并将其更改为
3、 重启服务,打开浏览器并访问：http://localhost:3000/。
利用Nuxt实现一个路由动画效果的详细内容，希望对您有所帮助，信息来源于网络。