Bagaimana untuk melaksanakan kesan peralihan dan animasi dalam Vue

Vue.js ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini. Apabila membina antara muka pengguna, selain mempertimbangkan isu seperti kefungsian dan reka letak, anda juga perlu mempertimbangkan cara untuk memberikan pengguna pengalaman pengguna yang lebih baik. Antaranya, kesan peralihan dan animasi adalah bahagian yang sangat penting. Artikel ini akan memperkenalkan cara untuk melaksanakan kesan peralihan dan animasi dalam Vue.js, membolehkan anda menggunakan kesan ini dalam projek anda dengan lebih fleksibel.

Peralihan dan animasi dalam Vue.js

Vue.js menyediakan satu set peralihan dan animasi API yang mudah dan mudah digunakan, membolehkan pembangun melaksanakan pelbagai kesan dalam aplikasi dengan mudah, seperti kesan asas seperti fade in dan fade out, anjakan, penskalaan, putaran, dsb., dan kesan yang lebih maju juga boleh disesuaikan. Peralihan dan animasi dalam Vue.js boleh digunakan dalam aspek berikut:

• boleh bertindak pada kesan peralihan masuk dan keluar komponen
• boleh bertindak pada kesan keadaan peralihan bagi komponen ;
• boleh digunakan pada kesan animasi pada elemen, dilaksanakan melalui kaedah addTransitionClass dan removeTransitionClass.

Seterusnya, kami akan menerangkan aspek-aspek ini secara terperinci.

Kesan peralihan masuk dan keluar komponen

Kesan peralihan masuk dan keluar komponen merujuk kepada kesan visual yang dihasilkan oleh komponen semasa proses pemuatan dan pemunggahan halaman, juga dikenali sebagai entri animasi dan Animasi rupa. Vue.js menyediakan komponen peralihan untuk memudahkan proses ini. Kaedah pelaksanaan khusus adalah seperti berikut:

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

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

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

Dalam kod, kami menggunakan komponen peralihan bernama fade untuk membalut elemen div dan menggunakan arahan v-if pada elemen div ini untuk menentukan paparan dan keadaan Tersembunyinya . Kita juga perlu menambah dua kelas, .fade-enter-active dan .fade-leave-active, pada gaya untuk menentukan tempoh dan jenis kesan peralihan. Pada masa yang sama, anda juga perlu menambah kelas .fade-enter dan .fade-leave-to untuk menentukan keadaan awal dan keadaan akhir komponen.

Apabila nilai persembahan berubah daripada palsu kepada benar, kelas fade-enter dan fade-enter-active akan ditambahkan pada elemen div, sekali gus mencetuskan kesan peralihan. Sebaliknya, apabila keadaan persembahan berubah kepada palsu, kelas fade-leave dan fade-leave-active akan ditambahkan pada elemen div, sekali gus mencetuskan kesan peralihan cuti.

Tiga bingkai utama akan berlaku semasa proses peralihan, iaitu:

• Sebelum peralihan bermula, iaitu, fade-enter atau fade-enter-active tidak ditambahkan pada elemen.
• Apabila peralihan sedang berjalan, fade-enter ditambahkan pada elemen, fade-enter-active turut ditambahkan pada elemen dan kesan animasi dipaparkan.
• Apabila peralihan selesai, iaitu fade-enter dikeluarkan dan fade-enter-active juga dialih keluar. Pada masa ini, fade-leave juga ditambahkan pada elemen, fade-leave-active turut ditambah, dan kesan animasi dipaparkan.

Kaedah pelaksanaan di atas ialah kesan fade-in dan fade-out yang mudah Jika anda perlu mencapai kesan peralihan yang lain, anda boleh mencapainya dengan mengubah suai gaya .fade-enter dan .fade. -cuti-ke.

Kesan keadaan peralihan untuk komponen

Selain daripada memasuki dan meninggalkan kesan peralihan, kesan keadaan peralihan juga boleh ditakrifkan untuk komponen. Contohnya, apabila komponen dipaparkan dan tetikus melayang di atas komponen, kami mahu komponen itu mempunyai kesan kelipan, yang boleh dicapai dengan mentakrifkan kesan keadaan peralihan. Kod pelaksanaan khusus adalah seperti berikut:

<template>
  <div class="container" @mouseover="startBlink" @mouseleave="stopBlink">
    <transition :name="transitionName">
      <div class="box" :class="{'blink': isBlink}"></div>
    </transition>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.box {
  width: 200px;
  height: 200px;
  background-color: #ff0000;
  transition: background-color 1s ease-in-out;
}
.blink {
  animation: blink 1s infinite;
}
@keyframes blink {
  0% {
    background-color: #ff0000;
  }
  50% {
    background-color: #ffff00;
  }
  100% {
    background-color: #ff0000;
  }
}
</style>

<script>
export default {
  data() {
    return {
      isBlink: false,
      transitionName: 'fade'
    }
  },
  methods: {
    startBlink() {
      this.isBlink = true
    },
    stopBlink() {
      this.isBlink = false
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan komponen peralihan, tetapi nilai atribut nama komponen peralihan terikat pada transitionName pembolehubah. Pembolehubah isBlink menentukan keadaan berkelip komponen. Pada masa yang sama, kami menambah kelas berkelip pada kotak dan status penggunaan kelas berkelip ditentukan oleh pembolehubah isBlink. Akhirnya, kami melaksanakan kesan berkelip dengan menggunakan animasi CSS3.

Kesan animasi pada elemen

Selain dapat menggunakan peralihan dan animasi pada komponen, Vue.js juga boleh menggunakan kesan animasi pada mana-mana elemen melalui kaedah addTransitionClass dan removeTransitionClass. Di sini kami akan menggunakan contoh mudah untuk menunjukkan pelaksanaan kaedah ini.

<template>
  <div class="container">
    <button @click="animate">Animate</button>
    <div class="box" :class="{'animated': animation}" ref="box"></div>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}
.animated {
  animation: bounce 1s;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

<script>
export default {
  data() {
    return {
      animation: false
    }
  },
  methods: {
    animate() {
      this.animation = true
      this.$nextTick(() => {
        this.$refs.box.classList.add('animated')
        this.$refs.box.addEventListener('animationend', () => {
          this.animation = false
          this.$refs.box.classList.remove('animated')
        })
      })
    }
  }
}
</script>

Dalam kod di atas, kami menambahkan acara klik pada butang dan mencetuskan kesan animasi dalam acara klik. Kesan animasi dicapai dengan menambahkan kelas animasi pada elemen dan kami menambah serta mengalih keluar kelas animasi melalui kaedah addTransitionClass dan removeTransitionClass. Apabila animasi tamat, kita perlu mengalih keluar kelas animasi secara manual.

Ringkasan

Vue.js menyediakan satu set peralihan dan animasi API yang mudah dan mudah digunakan Pembangun boleh menggunakan kesan ini dengan mudah untuk meningkatkan pengalaman pengguna aplikasi. Artikel ini memperkenalkan cara untuk melaksanakan kesan peralihan dan animasi dalam Vue.js, termasuk kesan peralihan masuk dan keluar komponen, kesan keadaan peralihan komponen dan kesan animasi pada elemen. Apabila melaksanakan kesan ini, anda perlu menguasai beberapa kemahiran asas CSS3, yang merupakan prasyarat untuk penggunaan peralihan dan kesan animasi yang lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kesan peralihan dan animasi dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!