Cara menggunakan fungsi cangkuk peralihan untuk mencapai kesan peralihan animasi dalam Vue

Dalam beberapa tahun kebelakangan ini, teknologi bahagian hadapan telah berkembang dengan lebih pantas dan pantas, dan rangka kerja Vue telah menjadi salah satu rangka kerja bahagian hadapan yang paling popular dalam pembangunan web. Rangka kerja Vue menyediakan kesan animasi yang berkuasa dan fleksibel, yang menjadikan antara muka web kami lebih jelas dan menarik, meningkatkan pengalaman pengguna. Menggunakan fungsi cangkuk peralihan dalam Vue untuk mencapai kesan peralihan animasi ialah salah satu cara biasa.

1. Apakah fungsi cangkuk peralihan?

Pemprosesan peralihan dalam Vue bukan melalui peralihan CSS, tetapi melalui gabungan nama kelas dinamik dan fungsi cangkuk JS. Vue menyediakan 6 fungsi cangkuk iaitu "sebelum masuk", "masuk", "selepas-masuk", "masuk-dibatalkan", "sebelum-keluar" dan "keluar".

2. Cara menggunakan fungsi cangkuk peralihan

Apabila elemen memasuki atau meninggalkan DOM, keadaan peralihan akan dicetuskan pada masa ini, kita boleh menggunakan yang sepadan fungsi cangkuk untuk menentukan kesan Peralihan. Kita boleh mencapai kesan ini melalui teg "peralihan" dalam komponen Vue.

Sebagai contoh, kita boleh menggunakan teg "peralihan" dalam komponen tersuai untuk melaksanakan kesan pudar mudah:

<template>
  <div v-show="show" class="fade">
    <p>{{text}}</p>
    <button @click="show = false">关闭</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      text: '这是一个淡出效果'
    }
  }
}
</script>

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

Dalam contoh di atas, kami mentakrifkan nama ialah kelas "pudar" dan mentakrifkan keadaan peralihannya apabila masuk dan keluar masing-masing. Kemudian gunakan arahan "v-show" dalam komponen Vue untuk mencetuskan paparan dan penyembunyian komponen.

Apabila paparan dan penyembunyian komponen dicetuskan, Vue akan menambah nama kelas yang sepadan secara automatik untuk mencapai kesan pudar. Pada ketika ini, kita hanya perlu menentukan keadaan peralihan yang sepadan dalam teg "gaya".

3. Parameter fungsi cangkuk peralihan

Parameter fungsi cangkuk termasuk empat Dalam fungsi "sebelum masuk" dan "sebelum keluar", terdapat hanya satu parameter. Menunjukkan elemen DOM yang akan dimasukkan atau dialih keluar; empat fungsi cangkuk yang lain masing-masing mempunyai dua parameter:

• el: menunjukkan elemen DOM sedang dimasukkan
• selesai : menunjukkan Fungsi panggil balik selepas peralihan selesai, fungsi ini boleh digunakan untuk melaksanakan beberapa operasi tertentu selepas animasi selesai

Seterusnya, kami memberikan contoh lengkap untuk menunjukkan penggunaan khusus bagi; fungsi cangkuk peralihan .

<template>
  <div>
    <button @click="show = !show">{{ show ? 'Hide' : 'Show' }}</button>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"

      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
    >
      <div v-show="show" class="box"></div>
    </transition>
  </div>
</template>

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

  methods: {
    beforeEnter: function(el) {
      el.style.opacity = 0;  // 设置元素开始状态
    },
    enter: function(el, done) {
      Vue.nextTick(() => {
        el.style.transition = 'opacity .5s';
        el.style.opacity = 1;    // 设置元素过渡状态
      });
      el.addEventListener('transitionend', done);
    },
    afterEnter: function(el) {
      el.style.transition = null;  // 设置元素结束状态
    },
    enterCancelled: function(el) {
      el.style.transition = null;  // 过渡取消时的回调函数
    },
    beforeLeave: function(el) {
      el.style.opacity = 1;  // 设置元素开始状态
    },
    leave: function(el, done) {
      Vue.nextTick(() => {          
        el.style.transition = 'opacity .5s';
        el.style.opacity = 0;  // 设置元素过渡状态
      });
      el.addEventListener('transitionend', done);
    },
    afterLeave: function(el) {
      el.style.transition = null;  // 设置元素结束状态
    },
    leaveCancelled: function(el) {
      el.style.transition = null;  // 过渡取消时的回调函数
    },
  },
};
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
}
</style>

Dalam contoh di atas, kami mentakrifkan lapan fungsi cangkuk peralihan, yang sepadan dengan keadaan berbeza apabila komponen masuk dan keluar Kesan peralihan khusus untuk masuk dan keluar dikawal oleh fungsi cangkuk.

Apabila memasuki komponen, fungsi cangkuk "sebelum masuk" menetapkan keadaan permulaan elemen, manakala fungsi cangkuk "masuk" menetapkan peralihan elemen, dan kemudian mengikat "selesai" melalui " transitionend" fungsi Panggilan balik untuk melengkapkan peralihan.

Begitu juga apabila meninggalkan komponen, fungsi "sebelum keluar" mula-mula menetapkan keadaan permulaan elemen, dan kemudian fungsi cangkuk "tinggalkan" menetapkan keadaan peralihan keluar dan mengikat "selesai" melalui Fungsi "transitionend" fungsi Panggilan balik untuk melengkapkan peralihan cuti.

4. Ringkasan

Dalam Vue, anda boleh menggunakan teg "peralihan" untuk mencapai kesan peralihan yang berbeza dan mentakrifkan keadaan peralihan yang berbeza melalui enam fungsi cangkuk. Penggunaan fungsi cangkuk peralihan adalah salah satu perkara utama yang perlu dikuasai. Melaksanakan kesan peralihan melalui fungsi cangkuk membolehkan kami mengawal keadaan peralihan komponen dengan lebih fleksibel, dengan itu meningkatkan pengalaman pengguna aplikasi web dan mencapai kesan yang lebih jelas dan menarik.

Atas ialah kandungan terperinci Cara menggunakan fungsi cangkuk peralihan untuk mencapai kesan peralihan animasi dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!