구성 요소에서 "vuetify" 전환을 사용하는 방법

구성 요소에서 "vuetify" 전환을 사용하는 방법

나는 프로젝트에 Vuetifyjs 라이브러리를 사용하고 있다.구성 요소에 전환을 추가하고 싶지만 전환을 시작하는 방법에 대한 설명서가 없다.

예를 들어, 나는 화면에 있는 내 카드의 모양에 몇 가지 전환을 추가하고 싶다.

<v-card transition="v-slide-y-transition">...</v-card>

전환을 시작하는 방법

이렇게 하면 전환 시 일부 카드 텍스트가 포장된다.v-show="show" 모델을 true로 트리거하면 텍스트가 슬라이딩된다.

<v-slide-y-transition>
  <v-card-text v-show="show">
    Example text
  </v-card-text>
</v-slide-y-transition>

버튼이 트리거하도록 하거나 구성 요소가 로드된 후 프로그램을 true로 트리거하는 onCreate() 메서드를 추가할 수도 있다.

라우터 뷰에서 Vuetify 전환을 사용하는 경우, 전환이 때때로 종료/입력 시 방해될 수 있다.

전환이 더 부드럽게 보이도록 하려면 프로펠러를 사용해 보십시오.hide-on-leave="true"

<v-scroll-x-transition mode="in" hide-on-leave="true">
  <router-view></router-view>
</v-scroll-x-transition>

참조URL: https://stackoverflow.com/questions/44692813/how-to-use-vuetify-transitions-on-my-components