So verwenden Sie die Übergangs-Hook-Funktion, um einen Animationsübergangseffekt in Vue zu erzielen

In den letzten Jahren hat sich die Front-End-Technologie immer schneller weiterentwickelt und das Vue-Framework hat sich zu einem der beliebtesten Front-End-Frameworks in der Webentwicklung entwickelt. Das Vue-Framework bietet leistungsstarke und flexible Animationseffekte, die unsere Weboberfläche lebendiger und attraktiver machen und das Benutzererlebnis verbessern. Die Verwendung der Übergangs-Hook-Funktion in Vue zum Erzielen von Animationsübergangseffekten ist eine der gängigsten Methoden.

1. Was ist eine Übergangs-Hook-Funktion?

Die Übergangsverarbeitung in Vue wird nicht durch CSS-Übergänge erreicht, sondern durch die Kombination von dynamischen Klassennamen und JS-Hook-Funktionen. Vue bietet 6 Hook-Funktionen, nämlich „before-enter“, „enter“, „after-enter“, „enter-cancelled“, „before-leave“ und „leave“.

2. So verwenden Sie die Übergangs-Hook-Funktion

Wenn ein Element das DOM betritt oder verlässt, wird der Übergangsstatus ausgelöst. Zu diesem Zeitpunkt können wir die entsprechende Hook-Funktion verwenden, um den Übergangseffekt zu definieren. Diesen Effekt können wir durch das „transition“-Tag in der Vue-Komponente erreichen.

Zum Beispiel können wir das Tag „transition“ in einer benutzerdefinierten Komponente verwenden, um einen einfachen Ausblendeffekt zu implementieren:

<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>

Im obigen Beispiel haben wir eine Klasse mit dem Namen „fade“ definiert und die Übergangszustände beim Eingeben von und definiert verlassen bzw. Verwenden Sie dann die Direktive „v-show“ in der Vue-Komponente, um das Ein- und Ausblenden der Komponente auszulösen.

Wenn das Ein- und Ausblenden der Komponente ausgelöst wird, fügt Vue automatisch den entsprechenden Klassennamen hinzu, um den Ausblendeffekt zu erzielen. An dieser Stelle müssen wir nur noch den entsprechenden Übergangszustand im Tag „style“ definieren.

3. Parameter der Übergangs-Hook-Funktion

Die Parameter der Hook-Funktion umfassen vier. In den Funktionen „Before-Enter“ und „Before-Leave“ gibt es nur einen Parameter, der das DOM-Element darstellt, um das es geht einzufügen oder zu entfernen; die anderen Die vier Hook-Funktionen haben jeweils zwei Parameter:

• el: stellt das eingefügte DOM-Element dar;
• done: stellt die Rückruffunktion dar, die nach Abschluss des Übergangs verwendet werden kann, um bestimmte Elemente auszuführen Operationen nach Abschluss der Animation;

Als nächstes geben wir ein vollständiges Beispiel, um die spezifische Verwendung der Übergangs-Hook-Funktion zu demonstrieren.

<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>

Im obigen Beispiel haben wir acht Übergangs-Hook-Funktionen definiert, die unterschiedlichen Zuständen beim Betreten und Verlassen der Komponente entsprechen. Die spezifischen Übergangseffekte beim Betreten und Verlassen werden durch die Hook-Funktion gesteuert.

Beim Betreten der Komponente legt die Hook-Funktion „before-enter“ den Startstatus des Elements fest, während die Hook-Funktion „enter“ den Übergang des Elements festlegt und dann die Rückruffunktion „done“ über „transitionend“ bindet „Ereignis zum Abschließen des Übergangs.

In ähnlicher Weise legt die Funktion „before-leave“ beim Verlassen einer Komponente zunächst den Startzustand des Elements fest, und dann legt die Hook-Funktion „leave“ den Übergangszustand des Verlassens fest und bindet die Rückruffunktion „done“ über „ Transitionend“-Ereignis zum Abschließen des Abgangsübergangs.

4. Zusammenfassung

In Vue können Sie das Tag „transition“ verwenden, um unterschiedliche Übergangseffekte zu erzielen und über sechs Hook-Funktionen unterschiedliche Übergangszustände zu definieren. Die Verwendung von Übergangs-Hook-Funktionen ist einer der wichtigsten Punkte, die beherrscht werden müssen. Durch die Implementierung von Übergangseffekten über Hook-Funktionen können wir den Übergangszustand von Komponenten flexibler steuern, wodurch das Benutzererlebnis von Webanwendungen verbessert und lebendigere und attraktivere Effekte erzielt werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Übergangs-Hook-Funktion, um einen Animationsübergangseffekt in Vue zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!