Of Stack

A Case Study of Nuxt Routing Animation Effect

  • 2021-09-16 06:00:26
  • OfStack

The animation effect of routing is also called page replacement effect. Nuxt. js lift two methods for routing lift animation effect, one is global, and the other is made for individual pages.

Global routing animation

Global animation is set using page by default. For example, now we set 1 fade-in and fade-out effect for each page. We can first create an main. css file under assets/css in the root directory.

/assets/css/main.css 


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

Then add a global css file in nuxt. config. js. 


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)/
  })
  }
 }
 }
}

At this time, when the page switches, there will be 2 seconds of animation effect, but you will find that 1 page has no effect, because you did not use it < nuxt-link > Component to make jump links. You need to make changes.

For example, change it to the following:

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

After the correction, you will see the animation effect.

Set the page action effect separately

If you want to set a special effect for a page, we only need to change the default page in css, and then add transition field to the configuration of page components. For example, we want to add a font zoom-in and zoom-out effect to the about page, which other pages don't have.

Add the following to the global style 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;
}

Then set in the about/index. vue component 


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

Additional knowledge: vue-ssr framework nuxt pit filling

Nuxt. js 1.0. 0 initialization and dependency package installation

vue init nuxt/started

npm install

npm run dev

npm run dev error report 


> 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

Resolve a mistake

Upgrade node to node8.12. 0

Upgrade to nuxt-edge Nuxt. js 2.0

1. Run npm run dev to report errors 


  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. Fix the error: Edit the nuxt. conf. js file and change it to 


  - 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. Restart the service, open the browser and visit: http://localhost: 3000/.

Related articles: