Apakah teg yang vue gunakan untuk menentukan peralihan

Dalam vue, gunakan teg peralihan untuk menentukan peralihan bermula dari vue2.0, ia menyokong dan menyediakan komponen peralihan digunakan sebagai teg Jika anda ingin menambah kesan peralihan atau animasi kepada elemen dalam Vue, anda perlu Balut elemen dengan teg peralihan.

Persekitaran pengendalian artikel ini: sistem Windows 10, versi Vue 2.9.6, komputer DELL G3.

Apakah teg yang vue gunakan untuk menentukan peralihan

Teg peralihan:

Jika anda ingin menambah kesan peralihan atau animasi pada elemen dalam Vue , anda perlu Balut elemen dengan tag.

Perubahan versi:

Peralihan dalam Vue1.0 disokong oleh Vue sebagai atribut sebaris label. Tetapi dalam Vue2.0. Vue menggugurkan sokongan untuk sifat lama dan menyediakan komponen peralihan, yang digunakan sebagai label.

Animasi peralihan

Untuk menggunakan peralihan pada komponen laluan anda dan navigasi animasi, anda perlu menggunakan API v-slot:

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

Semua ciri Peralihan digunakan di sini juga.

Peralihan untuk satu laluan

Penggunaan di atas akan menggunakan peralihan yang sama untuk semua laluan. Jika anda mahu setiap komponen yang dihalakan mempunyai peralihan yang berbeza, anda boleh menggabungkan maklumat meta dengan nama dinamik dan meletakkannya pada cafda773a3e42827d5d9338abf905240:

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>

[Cadangan berkaitan: "vue.js tutorial》]

Atas ialah kandungan terperinci Apakah teg yang vue gunakan untuk menentukan peralihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!