vue がトランジションを定義するために使用するタグ

vue では、transition タグを使用してトランジションを定義します。vue2.0 から、トランジション コンポーネントがサポートおよび提供されます。トランジションはタグとして使用されます。トランジション効果やアニメーションを追加する場合は、 Vue の要素に追加するには、要素をトランジション タグで囲む必要があります。

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue がトランジションの定義に使用するタグ

トランジション タグ:

Vue の要素にトランジション エフェクトまたはアニメーションを追加する場合、要素をタグで囲む必要があります。

バージョンの変更点:

Vue1.0 のトランジションは、vue によってラベルのインライン属性としてサポートされています。ただし、Vue2.0では。 Vue は古いプロパティのサポートを中止し、ラベルとして使用される遷移コンポーネントを提供しました。

トランジション アニメーション

パス コンポーネントでトランジションを使用し、ナビゲーションをアニメーション化するには、v-slot API を使用する必要があります。

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

# のすべての機能##ここでもトランジションが適用されます。

単一ルートのトランジション

上記の使用法では、すべてのルートに同じトランジションが使用されます。ルーティングされた各コンポーネントに異なるトランジションを持たせたい場合は、メタ情報を動的な名前と組み合わせて、 に配置できます:

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 チュートリアル》]

以上がvue がトランジションを定義するために使用するタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。