vue는 전환을 정의하기 위해 어떤 태그를 사용합니까?

Vue에서는 전환 태그를 사용하여 전환을 정의합니다. vue2.0부터 전환 구성 요소가 지원 및 제공됩니다. Vue의 요소에 전환 효과나 애니메이션을 추가하려면 요소 외부에 추가해야 합니다. 래핑을 위해 전환 태그를 사용하세요.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue는 전환을 정의하기 위해 어떤 태그를 사용합니까?

전환 태그:

Vue의 요소에 전환 효과나 애니메이션을 추가하려면 해당 요소를 태그로 래핑해야 합니다.

버전 변경:

Vue1.0에서는 vue에서 레이블의 인라인 속성으로 전환이 지원됩니다. 하지만 Vue2.0에서는. Vue는 이전 속성에 대한 지원을 중단하고 레이블로 사용되는 전환 구성 요소를 제공했습니다.

전환 애니메이션

경로 구성 요소에 전환을 사용하고 탐색에 애니메이션을 적용하려면 v-슬롯 API를 사용해야 합니다.

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

전환의 모든 기능이 여기에도 적용됩니다.

단일 경로에 대한 전환

위 사용법은 모든 경로에 대해 동일한 전환을 사용합니다. 라우팅된 각 구성 요소에 서로 다른 전환을 적용하려면 메타 정보와 동적 이름을 결합하여 300ff3b250bc578ac201dd5fb34a0004에 배치할 수 있습니다.

const routes = [
  {
    path: '/custom-transition',
    component: PanelLeft,
    meta: { transition: 'slide-left' },
  },
  {
    path: '/other-transition',
    component: PanelRight,
    meta: { transition: 'slide-right' },
  },
]
<router-view v-slot="{ Component, route }">
  <!-- 使用任何自定义过渡和回退到 `fade` -->
  <transition :name="route.meta.transition || &#39;fade&#39;">
    <component :is="Component" />
  </transition>
</router-view>

[관련 권장 사항: "vue.js tutorial" ]

위 내용은 vue는 전환을 정의하기 위해 어떤 태그를 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!