Smooth animations help make a UI feel great. Using Vue's transition system and re-usable functional components, you can easily control the motion of your application. Most components can have their transition altered through the transition prop.

Vuetify 는 Vuetify 에서 제공하는 수많은 컴포넌트들과 사용자 정의 컴포넌트에 적용할수 있는
10가지 이상의 커스텀 CSS 애니메이션을 제공합니다.

제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.

간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.

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

이 애니메이션들은 Vuetify Application에서 제공하는 $primary-transition 변수를 사용합니다.

Scroll X transitions continue along the horizontal axis.

Scroll Y transitions continue along the vertical axis.

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

An example of the fab transition can be found in the v-speed-dial component.

An example of the fade transition can be found on the Carousel component.

The expand transition is used in Expansion Panels and List Groups. There is also a horizontal version available with v-expand-x-transition.

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

다양한 커스텀 트랜지션들을 사용하여, 삶에 필효안 간편한 todo-list를 만들 수 있습니다.

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:

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:

더 읽을 준비 되었나요? 그렇다면 아래 설명서를 더 읽어보세요!

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!