Analisis fungsi peralihan Vue.dan cara mencapai kesan peralihan elemen-View.js-php.cn

Analisis fungsi peralihan Vue.dan cara mencapai kesan peralihan elemen

王林

Lepaskan： 2023-07-24 11:33:06

asal

1281 orang telah melayarinya

Analisis fungsi Vue.transition dan cara melaksanakan kesan peralihan elemen

Dalam Vue.js, kami sering menghadapi senario di mana kami perlu menambah kesan peralihan pada elemen. Vue menyediakan fungsi peralihan yang sangat mudah untuk mencapai kesan peralihan antara elemen. Artikel ini akan menganalisis fungsi Vue.transition secara terperinci dan memberikan contoh kod supaya semua orang boleh memahami dan menerapkannya dengan lebih baik.

Fungsi Vue.transition ialah fungsi terbina dalam Vue, digunakan untuk menambah kesan peralihan pada elemen. Sintaks asasnya adalah seperti berikut:

<transition name="fade">
  <p v-if="show">Hello</p>
</transition>

Salin selepas log masuk

Dalam kod di atas, tag <transition> digunakan untuk membalut elemen yang perlu menambah kesan peralihan. Atribut nama menentukan nama kesan peralihan, di sini kita namakannya "pudar". Arahan v-if ialah keadaan yang mengawal paparan dan penyembunyian elemen. Apabila rancangan adalah benar, elemen dipaparkan dan kesan peralihan dicetuskan Apabila rancangan adalah palsu, elemen disembunyikan dan kesan peralihan dicetuskan.

Seterusnya, mari kita lihat bagaimana kesan peralihan khusus dicapai. Dalam Vue, kita boleh mengawal kesan peralihan elemen dengan mentakrifkan gaya CSS. Sebagai contoh, apabila elemen dipaparkan, kita boleh menentukan kesan fade-in, dan apabila elemen tersebut disembunyikan, kita boleh menentukan kesan fade-out. Kod sampel adalah seperti berikut:

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

Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan dua nama kelas CSS fade-enter-active dan fade-leave-active. Kedua-dua nama kelas ini ditambahkan pada elemen apabila ia ditunjukkan dan disembunyikan masing-masing, dan masa kesan peralihan dikawal melalui atribut peralihan CSS. Apabila elemen dipaparkan, kami mentakrifkan nama kelas fade-enter dan tetapkan kelegapan elemen kepada 0. Apabila elemen disembunyikan, kami mentakrifkan nama kelas fade-leave-active dan juga menetapkan kelegapan elemen kepada 0.

Melalui takrifan kod di atas, kami telah melengkapkan tetapan kesan peralihan elemen. Sekarang, kita hanya perlu mentakrifkan nilai rancangan sebagai benar atau salah dalam contoh Vue untuk mencetuskan kesan peralihan elemen.

Berikut ialah contoh kod lengkap:

<body>
  <div id="app">
    <transition name="fade">
      <p v-if="show">Hello</p>
    </transition>
    <button @click="toggleShow">Toggle</button>
  </div>
</body>

<script>
new Vue({
  el: '#app',
  data: {
    show: false
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    }
  }
})
</script>

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

Salin selepas log masuk

Dalam kod di atas, kami menentukan kaedah toggleShow dalam contoh Vue untuk menogol nilai persembahan. Dengan mengklik butang, kami boleh menukar paparan dan menyembunyikan elemen, sekali gus mencetuskan kesan peralihan.

Untuk meringkaskan, fungsi Vue.transition ialah fungsi penting dalam Vue yang digunakan untuk mencapai kesan peralihan elemen. Kita boleh mengawal kesan peralihan elemen dengan mentakrifkan gaya CSS, dan kemudian menerapkannya pada elemen melalui fungsi Vue.transition. Melalui perubahan dalam data, kami boleh mencetuskan paparan dan penyembunyian elemen untuk mencapai kesan peralihan. Saya berharap analisis dan contoh kod dalam artikel ini dapat membantu anda memahami dan menggunakan fungsi Vue.transition dengan lebih baik.

Atas ialah kandungan terperinci Analisis fungsi peralihan Vue.dan cara mencapai kesan peralihan elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!