Mula Pantas VUE3: Menggunakan pemalam Vue.js untuk mencapai kesan animasi

Permulaan Pantas VUE3: Gunakan pemalam Vue.js untuk mencapai kesan animasi

Vue.js ialah rangka kerja JavaScript popular yang membantu pembangun membina aplikasi web interaktif. VUE3 ialah versi terkini, yang memberikan prestasi yang lebih baik dan lebih banyak ciri, dengan kelajuan pemaparan yang lebih pantas dan saiz berkas yang lebih kecil. Dalam artikel ini, kita akan belajar cara menggunakan pemalam Vue.js untuk mencapai kesan animasi.

Pemalam Vue.js ialah cara untuk melanjutkan fungsi Vue.js. Mereka boleh menambah fungsi dan tingkah laku baharu pada komponen Vue, seperti kesan animasi. Pemalam Vue.js lazimnya ialah perpustakaan yang ditulis dalam JavaScript yang boleh disuntik dan didaftarkan sebagai komponen global atau tempatan dalam contoh Vue.js.

Dalam artikel ini, kami akan menggunakan pemalam TweenMax.js untuk melaksanakan menu navigasi dinamik. TweenMax.js ialah perpustakaan JavaScript untuk mencipta kesan animasi yang kaya. Ia menyokong banyak jenis animasi, termasuk pelonggaran, urutan dan operasi kelompok.

Langkah 1: Pasang pemalam TweenMax.js

Mula-mula, kita perlu memasang pemalam TweenMax.js. Kita boleh menggunakan npm untuk memasang TweenMax.js, arahannya adalah seperti berikut:

npm install gsap --save

Kemudian, dalam komponen Vue yang perlu menggunakan TweenMax.js, kita boleh menggunakan kata kunci import untuk memperkenalkan perpustakaan TweenMax.js :

import { TweenMax } from "gsap";

Langkah 2: Tambah gaya CSS

Seterusnya, kita perlu menambah gaya pada menu navigasi. Dalam templat komponen Vue, buat menu navigasi dan tambahkan gaya CSS padanya Kod adalah seperti berikut:

<nav>
    <ul>
        <li>Home</li>
        <li>Blog</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>

<style>
nav {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  height: 60px;
  background-color: #333;
}

nav ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 40%;
}

nav li {
  cursor: pointer;
  color: #fff;
  transition: transform 0.3s;
}

nav li:hover {
  transform: scale(1.2);
}
</style>

Langkah 3: Sediakan komponen Vue

Seterusnya, dalam bahagian. teg skrip Vue Tentukan komponen dengan kod berikut:

<script>
import { TweenMax } from &quot;gsap&quot;;

export default {
  name: "Navigation",
  data() {
    return {
      navList: [
        { name: "Home", active: false },
        { name: "Blog", active: false },
        { name: "About", active: false },
        { name: "Contact", active: false }
      ]
    };
  },
  methods: {
    onMouseEnter(index) {
      this.navList.forEach((item, i) => {
        if (i === index) {
          TweenMax.to(this.$refs[`li${i}`], 0.2, { y: -5, ease: "Bounce.easeOut" });
          item.active = true;
        } else {
          TweenMax.to(this.$refs[`li${i}`], 0.2, { y: 5, ease: "Bounce.easeOut" });
          item.active = false;
        }
      });
    },
    onMouseLeave(index) {
      this.navList.forEach((item, i) => {
        TweenMax.to(this.$refs[`li${i}`], 0.3, { y: 0, ease: "Expo.easeOut" });
        item.active = false;
      });
    }
  }
};
</script>

Tentukan objek data dalam komponen untuk menyimpan data menu navigasi. Objek data mengandungi tatasusunan navList, di mana setiap objek mewakili pilihan dalam menu navigasi.

Kami menggunakan arahan v-for untuk menghasilkan senarai ul dan mengikat acara pada setiap item senarai dan menambah kelas CSS padanya.

Kami juga perlu menentukan kaedah onMouseEnter dan kaedah onMouseLeave untuk mengendalikan acara apabila tetikus memasuki dan meninggalkan pilihan menu navigasi. Apabila tetikus memasuki pilihan menu navigasi, kami menggunakan kaedah TweenMax.to() untuk melaksanakan kesan animasi Apabila tetikus pergi, sifat aktif menu navigasi ditetapkan kepada palsu dan animasi yang dipulihkan dilakukan.

Langkah 4: Daftar komponen sebagai komponen global

Akhir sekali, kita perlu mendaftarkan komponen sebagai komponen global supaya ia boleh digunakan di mana-mana dalam aplikasi. Dalam fail kemasukan aplikasi (cth. main.js), tambah kod berikut:

import Navigation from "./components/Navigation.vue";

Vue.component("navigation", Navigation);

Ini akan mendaftarkan komponen Navigasi sebagai komponen global ke dalam contoh Vue.

Kini, kami telah melengkapkan menu navigasi dinamik dan kesan animasi yang dilaksanakan menggunakan pemalam TweenMax.js. Menggunakan pemalam dalam Vue.js boleh membantu kami meluaskan dan meningkatkan aplikasi kami dengan cepat. Sudah tentu, terdapat banyak pemalam Vue.js lain yang boleh membantu kami mencapai lebih banyak fungsi dan kesan animasi, mari cuba menerokainya!

Atas ialah kandungan terperinci Mula Pantas VUE3: Menggunakan pemalam Vue.js untuk mencapai kesan animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!