Pelaksanaan animasi peralihan halaman Vue dan kesan animasi biasa

Vue ialah rangka kerja JavaScript popular yang menggunakan pendekatan dipacu data untuk membantu pembangun dalam membina aplikasi web satu halaman dengan interaktiviti yang kukuh dan persembahan data yang cantik. Vue mempunyai banyak ciri berguna terbina dalam, salah satunya ialah animasi peralihan halaman. Dalam artikel ini, kami akan memperkenalkan cara menggunakan fungsi animasi peralihan Vue dan membincangkan kesan animasi yang paling biasa.

Melaksanakan animasi peralihan halaman Vue

Animasi peralihan halaman Vue dilaksanakan melalui komponen 300ff3b250bc578ac201dd5fb34a0004 dan 5c8969d1376a171e8b0ec4a1c01f185d Vue. Di bawah ini kami memperkenalkan kedua-dua komponen ini masing-masing.

cafda773a3e42827d5d9338abf905240

300ff3b250bc578ac201dd5fb34a0004Komponen boleh melakukan kesan animasi peralihan secara automatik apabila elemen yang dibalut dimasukkan, dikemas kini atau dialih keluar.

Komponen ini mengeluarkan before-enter, enter, after-enter, enter-cancelled dan before-leave, leave, after-leave, leave-cancelled dan fungsi cangkuk lain ke luar, membolehkan kami untuk mengawal Permulaan, penamat dan pembatalan peralihan.

Berikut ialah kesan animasi 300ff3b250bc578ac201dd5fb34a0004 yang ringkas, menunjukkan animasi peralihan elemen apabila dimasukkan. Ambil perhatian bahawa komponen ini memerlukan atribut name yang menentukan nama animasi. Dalam contoh di bawah, nama animasi ialah fade. Gaya CSS di sini mentakrifkan kesan animasi peralihan elemen pada permulaan dan akhir. Komponen

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="fade">
      <div v-if="show">Hello Vue!</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

5c8969d1376a171e8b0ec4a1c01f185d

5c8969d1376a171e8b0ec4a1c01f185d sangat serupa dengan 300ff3b250bc578ac201dd5fb34a0004, tetapi ia sesuai untuk elemen seperti item senarai atau jadual yang perlu dimasukkan dan dikeluarkan pada masa yang sama.

adalah sama dengan komponen 300ff3b250bc578ac201dd5fb34a0004 fungsi Cangkuk boleh ditakrifkan dalam komponen 5c8969d1376a171e8b0ec4a1c01f185d, seperti before-enter, enter, dsb.

5c8969d1376a171e8b0ec4a1c01f185d perlu menentukan atribut tag untuk menentukan jenis teg HTML yang dijana oleh komponen peralihan. Ia juga memerlukan setiap elemen kanak-kanak mempunyai nilai kunci unik supaya Vue boleh mengenal pasti elemen yang dimasukkan, dikemas kini atau dialih keluar dengan betul.

Dalam contoh di bawah, kami menunjukkan senarai ringkas yang menambah atau mengalih keluar item setiap kali butang diklik. Dalam contoh ini, kami menggunakan komponen 5c8969d1376a171e8b0ec4a1c01f185d dan menentukan jenis teg HTML sebagai ul. Setiap item dalam senarai disertakan dengan nilai utama untuk membantu Vue melaksanakan animasi peralihan dengan betul.

<template>
  <div>
    <button @click="shift()">Add/Remove Item</button>
    <transition-group name="list" tag="ul">
      <li v-for="item in items" :key="item">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
    };
  },
  methods: {
    shift() {
      if (this.items.length > 0) {
        this.items.shift();
      } else {
        this.items.push("New Item");
      }
    },
  },
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

Kesan animasi peralihan yang biasa digunakan

Kini, kami telah memperkenalkan cara menggunakan animasi peralihan Vue. Mari kita lihat beberapa kesan animasi peralihan biasa. Kesan

Pudar

Fade digunakan untuk pudar atau pudar. Ia menukar kelegapan unsur daripada 0 kepada 1 atau daripada 1 kepada 0. Kesan

<transition name="fade">
  <div v-if="show">Hello Vue!</div>
</transition>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

Slaid

Slide digunakan untuk meluncur elemen keluar atau ke satu sisi. Ia memindahkan kedudukan unsur dari satu kedudukan ke kedudukan yang lain. Kesan

<transition name="slide">
  <div v-if="show">Hello Vue!</div>
</transition>

<style>
.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter-to,
.slide-leave {
  transform: translateX(100%);
}
.slide-enter,
.slide-leave-to {
  transform: translateX(-100%);
}
</style>

Skala

Scale digunakan untuk menskala elemen dari kecil ke besar atau dari besar ke kecil. Ia mengecilkan lebar dan ketinggian sesuatu elemen daripada satu saiz ke saiz yang lain. Kesan

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="scale">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.scale-enter-active,
.scale-leave-active {
  transition: transform 0.5s;
}
.scale-enter,
.scale-leave-to {
  transform: scale(0);
}
</style>

Putar

Rotate digunakan untuk memutarkan elemen di sekeliling paksi. Ia memutarkan elemen di sekeliling sudut.

<template>
  <div>
    <button @click="show = !show">Toggle show</button>
    <transition name="rotate">
      <div v-if="show" class="box"></div>
    </transition>
  </div>
</template>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}
.rotate-enter-active,
.rotate-leave-active {
  transition: transform 0.5s;
}
.rotate-enter,
.rotate-leave-to {
  transform: rotate(180deg);
}
</style>

Ringkasan

Fungsi animasi peralihan Vue membolehkan kami menambah kesan peralihan animasi apabila elemen halaman dimasukkan, dikemas kini atau dialih keluar, menjadikan halaman lebih jelas dan menarik. Artikel ini memperkenalkan cara menggunakan komponen 300ff3b250bc578ac201dd5fb34a0004 dan 5c8969d1376a171e8b0ec4a1c01f185d Vue untuk melaksanakan animasi peralihan, dan juga memperkenalkan beberapa kesan animasi peralihan yang biasa digunakan. Jika anda perlu menambah kesan animasi pada aplikasi Vue anda, anda mungkin mahu mencuba komponen ini.

Atas ialah kandungan terperinci Pelaksanaan animasi peralihan halaman Vue dan kesan animasi biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!