Nuxt.js Transition

https://vuejs.org/guide/built-ins/transition.html#css-based-transitions

Transition | Vue.js

https://nuxtjs.org/docs/features/transitions

Transitions

 

Nuxt에서 transition을 사용하는 방법에 대해서 알아보자.

 

export default {
  // Can be a String
  transition: ''
  // Or an Object
  transition: {}
  // or a Function
  transition (to, from) {}
}

 

 

지역 사용

 

pages/index.vue

export default {
  transition: 'home'
}

<style>
  .home-enter-active, .home-leave-active { transition: opacity .5s; }
  .home-enter, .home-leave-active { opacity: 0; }
</style>

transition의 name을 home으로 설정했기 때문에 .home이 된다. test로 설정하면 .test이런식으로 설정이 된다.

 

 

전역 사용

 

main.css

 

page변경 시 설정

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

export default {
  css: ['~/assets/main.css']
}

 

layout변경 시 설정

.layout-enter-active,
.layout-leave-active {
  transition: opacity 0.5s;
}
.layout-enter,
.layout-leave-active {
  opacity: 0;
}

 

만약에 default 설정을 바꾸고 싶다면 다음처럼 설정 하면 된다.

 

nuxt.config.js

// Pages

export default {
  pageTransition: 'my-page'
  // or
  pageTransition: {
    name: 'my-page',
    mode: 'out-in',
    beforeEnter (el) {
      console.log('Before enter...');
    }
  }
}


// Layouts

export default {
  layoutTransition: 'my-layouts'
  // or
  layoutTransition: {
    name: 'my-layouts',
    mode: 'out-in'
  }
}

 

 

추가)

 

mode : out-in과 in-out이 있는데 기본 값은 out-in이다. in-out으로도 설정할 수 있다. transition이 안에서 밖으로 효과가 나타날것인지 아니면 반대로 나타날 것인지 설정해준다.

 

:name="transitionName" 동적으로 transition을 설정하여 사용할 수도 있다.