Nuxt的路由动画效果案例

2023-07-12 15:42:04 59

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

全局路由动画

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

/assets/css/main.css

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

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

module.exports={
/*
**Headersofthepage
*/
head:{
title:'delnuxt',
meta:[
{charset:'utf-8'},
{name:'viewport',content:'width=device-width,initial-scale=1'},
{hid:'description',name:'description',content:'Nuxt.jsproject'}
],
link:[
{rel:'icon',type:'image/x-icon',href:'/favicon.ico'}
],
},
css:['~assets/css/normailze.css','~assets/css/main.css'],
/*
**Customizetheprogressbarcolor
*/
loading:{color:'#3B8070'},
/*
**Buildconfiguration
*/
build:{
/*
**RunESLintonsave
*/
extend(config,{isDev,isClient}){
if(isDev&&isClient){
config.module.rules.push({
enforce:'pre',
test:/\.(js|vue)$/,
loader:'eslint-loader',
exclude:/(node_modules)/
})
}
}
}
}

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

比如改成如下：

NEWS

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

单独设置页面动效

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

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

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

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

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

Nuxt.js1.0.0初始化与依赖包安装

vueinitnuxt/started

npminstall

npmrundev

npmrundev报错

>nuxt-temp@1.0.0devE:\MaYunProject\nuxt-temp
>nuxt

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

SyntaxError:Unexpectedtokenfunction
atcreateScript(vm.js:56:10)
atObject.runInThisContext(vm.js:97:10)
atModule._compile(module.js:542:28)
atObject.Module._extensions..js(module.js:579:10)
atModule.load(module.js:487:32)
attryModuleLoad(module.js:446:12)
atFunction.Module._load(module.js:438:3)
atModule.require(module.js:497:17)
atrequire(internal/module.js:20:19)
atObject.(E:\MaYunProject\nuxt-temp\node_modules\nuxt\index.js:17:20)

npmERR!Windows_NT10.0.14393
npmERR!argv"G:\\node\\node.exe""G:\\node\\node_modules\\npm\\bin\\npm-cli.js""run""dev"
npmERR!nodev6.11.4
npmERR!npmv3.10.10
npmERR!codeELIFECYCLE
npmERR!nuxt-temp@1.0.0dev:`nuxt`
npmERR!Exitstatus1
npmERR!
npmERR!Failedatthenuxt-temp@1.0.0devscript'nuxt'.
npmERR!Makesureyouhavethelatestversionofnode.jsandnpminstalled.
npmERR!Ifyoudo,thisismostlikelyaproblemwiththenuxt-temppackage,
npmERR!notwithnpmitself.
npmERR!Telltheauthorthatthisfailsonyoursystem:
npmERR!nuxt
npmERR!Youcangetinformationonhowtoopenanissueforthisprojectwith:
npmERR!npmbugsnuxt-temp
npmERR!Orifthatisn'tavailable,youcangettheirinfovia:
npmERR!npmownerlsnuxt-temp
npmERR!Thereislikelyadditionalloggingoutputabove.

npmERR!Pleaseincludethefollowingfilewithanysupportrequest:
npmERR!E:\MaYunProject\nuxt-temp\npm-debug.log

解决错误

将node升级到node8.12.0

升级到nuxt-edgeNuxt.js2.0

1、运行npmrundev报错

ERRORFailedtocompilewith1errors
Modulebuildfailed(from./node_modules/eslint-loader/index.js):
TypeError:Cannotreadproperty'eslint'ofundefined
atObject.module.exports(.../node_modules/eslint-loader/index.js:148:18)

Youmayusespecialcommentstodisablesomewarnings.
Use//eslint-disable-next-linetoignorethenextline.
Use/*eslint-disable*/toignoreallwarningsinafile.

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

-module.exports={
+exportdefault{
//...
build:{
/*
**RunESLintonsave
*/
-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的路由动画效果案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

Nuxt的路由动画效果案例

热门推荐

随机推荐