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 <transition> dan <transition-group> Vue. Di bawah ini kami memperkenalkan kedua-dua komponen ini masing-masing.

<transition>Komponen 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 <transition> 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>

<transition-group>

<transition-group> sangat serupa dengan <transition>, tetapi ia sesuai untuk elemen seperti item senarai atau jadual yang perlu dimasukkan dan dikeluarkan pada masa yang sama.

adalah sama dengan komponen <transition> fungsi Cangkuk boleh ditakrifkan dalam komponen <transition-group>, seperti before-enter, enter, dsb.

<transition-group> 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 <transition-group> 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 <transition> dan <transition-group> 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!