Nuxt 라우팅 애니메이션 효과 사례

5895 단어 Nuxt경로애니메이션
라우팅의 애니메이션 효과를 페이지 교체 효과라고도 합니다.Nuxt.js 추출 두 가지 방법은 루트 추출 애니메이션 효과로 하나는 전체적인 것이고 하나는 단독 페이지를 대상으로 하는 것이다.
글로벌 라우팅 애니메이션
전역 애니메이션은 기본적으로 페이지를 사용하여 설정합니다. 예를 들어 현재 우리는 모든 페이지에 들어가고 끝날 때의 점차적인 효과를 설정합니다.우리는 먼저 루트 디렉터리의 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초의 애니메이션 효과가 나타나지만 일부 페이지가 효과가 없다는 것을 발견할 수 있다. 이것은 구성 요소를 사용하여 점프 링크를 만들지 않았기 때문이다.너는 변경이 필요하다.
예를 들어 다음과 같이 변경합니다.
NEWS
고치면 애니메이션 효과가 있을 거예요.
개별 페이지 동작 설정
한 페이지에 특수한 효과를 단독으로 설정하려면 css에서 기본 페이지를 바꾸고 페이지 구성 요소의 설정에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 오류

> [email protected] dev E:\MaYunProject
uxt-temp
> nuxt

E:\MaYunProject
uxt-temp
ode_modules
uxt\dist
uxt.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
uxt-temp
ode_modules
uxt\index.js:17:20)

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "G:\
ode\
ode.exe" "G:\
ode\
ode_modules\
pm\\bin\
pm-cli.js" "run" "dev"
npm ERR! node v6.11.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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
uxt-temp
pm-debug.log
오류 해결
node를 node8.12.0으로 업그레이드
nuxt-edge Nuxt로 업그레이드합니다.js 2.0
1. npmrun 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의 루트 애니메이션 효과 사례는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
[JAVA] 형 변환 예제 2
Graphql 기본기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage