Ketahui animasi Peralihan tersuai dalam Vue 3 untuk mencipta kesan halaman yang menarik

Dalam era Internet hari ini, kesejukan dan pemperibadian kesan halaman telah menjadi salah satu faktor penting yang menarik perhatian pengguna. Dalam bidang pembangunan bahagian hadapan, Vue 3, sebagai rangka kerja JavaScript yang popular, mempunyai prestasi dan fleksibiliti yang sangat baik, menyediakan pembangun dengan pelbagai alatan dan API untuk mencapai kesan halaman kreatif. Antaranya, animasi Transition tersuai adalah teknologi yang sangat menarik dan keren Artikel ini akan memperkenalkan cara mempelajari dan menggunakan animasi Transition tersuai dalam Vue 3 untuk mencipta kesan halaman yang menarik.

Pertama sekali, mari kita fahami apakah animasi Peralihan dalam Vue 3. Animasi peralihan ialah kesan peralihan yang dilaksanakan dalam komponen Vue, yang membenarkan komponen dipaparkan dalam cara animasi apabila dimasukkan, dikemas kini atau dialih keluar. Vue 3 menyediakan komponen peralihan dan komponen kumpulan peralihan untuk melaksanakan fungsi ini. Komponen peralihan digunakan untuk mengalihkan satu elemen, manakala komponen kumpulan peralihan boleh mengalihkan berbilang elemen.

Untuk mempelajari dan menggunakan animasi Transisi tersuai dengan lebih baik, kita perlu menguasai beberapa konsep dan teknik asas terlebih dahulu. Pertama, kita perlu memahami nama dan peristiwa kelas peralihan dalam Vue 3. Nama kelas peralihan termasuk empat keadaan: masukkan (masuk), keluar (keluar), masukkan peralihan (masuk-ke) dan peralihan keluar (keluar). Dalam keadaan yang sepadan, kita boleh mencapai kesan animasi dengan menambah nama kelas yang sepadan.

Kedua, ia juga sangat penting untuk memahami peristiwa peralihan. Peristiwa peralihan dalam Vue 3 boleh dibahagikan kepada dua kategori: acara biasa dan acara CSS. Yang pertama termasuk acara seperti sebelum masuk, masuk, selepas masuk, sebelum cuti, cuti, selepas cuti, dsb., dan boleh melakukan operasi yang sepadan pada peringkat peralihan yang berbeza. Yang terakhir termasuk acara seperti enter-active dan leave-active, yang boleh digunakan untuk menambah atau memadam nama kelas pada permulaan dan akhir animasi, dengan itu mencetuskan animasi CSS. Dengan menggabungkan nama kelas peralihan dan peristiwa peralihan, kami boleh mencapai pelbagai kesan animasi Peralihan tersuai.

Seterusnya, mari kita gunakan contoh mudah untuk menunjukkan cara menggunakan Vue 3 untuk melaksanakan animasi Peralihan tersuai. Katakan kita mempunyai komponen butang Apabila butang diklik, butang itu akan ditunjukkan atau disembunyikan dengan kesan animasi pudar. Pertama, kita perlu menambah komponen peralihan pada templat komponen butang dan tetapkan nama kelas peralihan dan peristiwa peralihan:

<template>
  <button @click="toggle" class="fade-button">
    {{ visible ? '隐藏' : '显示' }}
  </button>
  <transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
    <div v-if="visible" key="content" class="fade-content">
      欢迎来到炫酷的页面效果世界！
    </div>
  </transition>
</template>

Dalam peristiwa klik butang, kita perlu menukar data responsif Nilai kelihatan untuk bertukar antara menunjukkan atau menyembunyikan butang: visible的值来实现按钮显示或隐藏的切换：

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    toggle() {
      this.visible = !this.visible;
    },
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      el.offsetWidth; // 强制重绘
      el.style.opacity = 1;
      done();
    },
    leave(el, done) {
      el.style.opacity = 0;
      setTimeout(done, 1000); // 设置延时以等待动画结束
    }
  }
};
</script>

在上述代码中，我们通过el参数获取到要添加动画的元素，并通过改变其样式来实现动画效果。在enter和leave事件的结束时，我们还通过done函数来通知Vue动画已经完成，从而可以进行下一步的操作。

最后，我们还需要为这些动画添加相应的CSS样式。我们可以在样式表中定义.fade-enter、.fade-leave、.fade-enter-to和.fade-leave-to类名，并通过transition

.fade-enter,
.fade-leave {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter-to,
.fade-leave-to {
  opacity: 1;
}

rrreee

Atas ialah kandungan terperinci Ketahui animasi Peralihan tersuai dalam Vue 3 untuk mencipta kesan halaman yang menarik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!