Nuxt的路由动画效果案例


Posted in Javascript onNovember 06, 2020

路由的动画效果,也叫作页面的更换效果。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文件就可以了。

module.exports = {
 /*
 ** Headers of the page
 */
 head: {
 title: 'delnuxt',
 meta: [
  { charset: 'utf-8' },
  { name: 'viewport', content: 'width=device-width, initial-scale=1' },
  { hid: 'description', name: 'description', content: 'Nuxt.js project' }
 ],
 link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
 ],
 },
 css:['~assets/css/normailze.css','~assets/css/main.css'],
 /*
 ** Customize the progress bar color
 */
 loading: { color: '#3B8070' },
 /*
 ** Build configuration
 */
 build: {
 /*
 ** Run ESLint on save
 */
 extend (config, { isDev, isClient }) {
  if (isDev && isClient) {
  config.module.rules.push({
   enforce: 'pre',
   test: /\.(js|vue)$/,
   loader: 'eslint-loader',
   exclude: /(node_modules)/
  })
  }
 }
 }
}

这时候在页面切换的时候就会有2秒钟的动画效果了,但是你会发现一些页面时没有效果,这是因为你没有使用<nuxt-link>组件来制作跳转链接。你需要进更改。

比如改成如下:

<nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link>

改过之后你就会看到有动画效果了。

单独设置页面动效

想给一个页面单独设置特殊的效果时,我们只要在css里改变默认的page,然后在页面组件的配置中加入transition字段即可。例如,我们想给about页面加入一个字体放大然后缩小的效果,其它页面没有这个效果。

在全局样式assets/main.css中添加以下内容。

.test-enter-active,.test-leave-active{
 transition: all 2s;
 font-size: 12px;
}
.test-enter,.test-leave-active{
 opacity: 0;
 font-size: 40px;
}

然后在about/index.vue组件中设置

<script>
export default {
 transition:'test'
}
</script>

补充知识:vue-ssr框架nuxt填坑

Nuxt.js 1.0.0 初始化与依赖包安装

vue init nuxt/started

npm install

npm run dev

npm run dev 报错

> nuxt-temp@1.0.0 dev E:\MaYunProject\nuxt-temp
> nuxt

E:\MaYunProject\nuxt-temp\node_modules\nuxt\dist\nuxt.js:79
async function promiseFinally(fn, finalFn) {
  ^^^^^^^^

SyntaxError: Unexpected token function
 at createScript (vm.js:56:10)
 at Object.runInThisContext (vm.js:97:10)
 at Module._compile (module.js:542:28)
 at Object.Module._extensions..js (module.js:579:10)
 at Module.load (module.js:487:32)
 at tryModuleLoad (module.js:446:12)
 at Function.Module._load (module.js:438:3)
 at Module.require (module.js:497:17)
 at require (internal/module.js:20:19)
 at Object.<anonymous> (E:\MaYunProject\nuxt-temp\node_modules\nuxt\index.js:17:20)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "G:\\node\\node.exe" "G:\\node\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
npm ERR! node v6.11.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! nuxt-temp@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nuxt-temp@1.0.0 dev script 'nuxt'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the nuxt-temp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!  nuxt
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!  npm bugs nuxt-temp
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!  npm owner ls nuxt-temp
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!  E:\MaYunProject\nuxt-temp\npm-debug.log

解决错误

将node 升级到 node8.12.0

升级到nuxt-edge Nuxt.js 2.0

1、运行 npm run dev报错

ERROR Failed to compile with 1 errors
  Module build failed (from ./node_modules/eslint-loader/index.js):
  TypeError: Cannot read property 'eslint' of undefined
   at Object.module.exports (.../node_modules/eslint-loader/index.js:148:18)

  You may use special comments to disable some warnings.
  Use // eslint-disable-next-line to ignore the next line.
  Use /* eslint-disable */ to ignore all warnings in a file.

2、修正错误:编辑nuxt.conf.js文件并将其更改为

- module.exports = {
  + export default {
   // ...
   build: {
    /*
    ** Run ESLint on save
    */
   - extend (config, { isDev, isClient }) {
   -  if (isDev && isClient) {
   + extend (config, { isDev }) {
   +  if (isDev && process.client) {
     config.module.rules.push({
     enforce: 'pre',
     test: /\.(js|vue)$/,
     loader: 'eslint-loader',
     exclude: /(node_modules)/
     })
    }
    }
   }
  }

3、 重启服务,打开浏览器并访问:http://localhost:3000/。

以上这篇Nuxt的路由动画效果案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于Javascript 的 prototype问题。
Jan 03 Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 #Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 #Javascript
微信小程序调用后台service教程详解
Nov 06 #Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 #Javascript
在nuxt中使用路由重定向的实例
Nov 06 #Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 #Javascript
Nuxt的路由配置和参数传递方式
Nov 06 #Javascript
You might like
发布一个迷你php+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
2015/03/02 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
js实现小星星游戏
2020/03/23 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
Python+django实现简单的文件上传
2016/08/17 Python
Python3数字求和的实例
2019/02/19 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
Python 音频生成器的实现示例
2019/12/24 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
keras中的History对象用法
2020/06/19 Python
tensorflow下的图片标准化函数per_image_standardization用法
2020/06/30 Python
python中pickle模块浅析
2020/12/29 Python
java关于string最常出现的面试题整理
2021/01/18 Python
如何执行一个shell程序
2012/11/23 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
工作失职自我检讨书
2015/05/05 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
python编写五子棋游戏
2021/05/25 Python
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL