모션 (Motion)

부드러운 애니메이션은 UI에 대한 느낌을 좋게 만듭니다. Vue의 트랜지션 (transition; 장면전환) 시스템과 재사용가능한 펑셔널(functional) 컴포넌트를 사용하면 쉽게 어플리케이션의 모션을 조절할 수 있습니다. 대부분의 컴포넌트는 transition prop 을 이용하여 트랜지션을 조절할 수 있습니다.

사용법

슬라이드 x 트랜지션은 가로축 방향으로 움직입니다.


API

이름
group
디폴트
false
타입
boolean
이름
hide-on-leave
디폴트
false
타입
boolean
이름
leave-absolute
디폴트
false
타입
boolean
이름
mode
디폴트
undefined
타입
string
이름
origin
디폴트
'top center 0'
타입
string

예제

슬라이드 Y 트랜지션 (Slide Y transitions)

Animations use the applications $primary-transition.


스케일 트랜지션 (Scale transition)

많ㅇ느 Vuetify 컴포넌트들은 사용자가 설정할 수 있는 transition prop 을 가지고 있습니다.


페이드 트랜지션 (Fade transition)

페이드 트랜지션의 다른 예는 캐라솔 (Carousel) 컴포넌트에서 찾을 수 있습니다.


커스텀 오리진 (Custom Origin)

간단한 prop을 사용해서 트랜지션의 원점(origin)을 프로그래매틱하게 조절할 수 있습니다.


Todo listNew in v1.2

Using multiple custom transitions, it is easy to bring a simple todo list to life!


사용자 트랜지션 만들기

You can use Vuetify's transition helper function to easily create your own custom transitions. This function will return an object that you can import into Vue. Using Vue's functional component option will make sure your transition is as efficient as possible. Simply import the function:

import { createSimpleTransition } from 'vuetify/es5/util/helpers'
 
const myTransition = createSimpleTransition('my-transition')
 
Vue.component('my-transition', myTransition)

The createSimpleTransition function accepts 1 argument, name. This will be the name that you can hook into with your style. This is an example of what v-fade-transition looks like:

.fade-transition
  &-leave-active
    position: absolute
 
  &-enter-active, &-leave, &-leave-to
    transition: $primary-transition
 
  &-enter, &-leave-to
    opacity: 0