Bringen Sie Ihnen bei, wie Sie mit Vue Animationseffekte erzielen (mit Code)

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS3 ein einfaches Seitenlayout erstellen (detaillierte Code-Erklärung)“ habe ich Ihnen gezeigt, wie Sie mit CSS3 ein einfaches Seitenlayout erstellen. Im folgenden Artikel erfahren Sie, wie Sie mit Vue Animationseffekte erzielen. Ich hoffe, dass er Ihnen weiterhilft.

Offizielle API-Adresse: https://cn.vuejs.org/v2/guide/transitions.html

Offizielle Demo Zum Anzeigen und Verschwinden klickendemo点击显示与消失

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
<script>
  new Vue({
    el: "#demo",
    data: {
      show: true,
    },
  });
</script>
<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
</style>

transition 使用

<transition name="fade">
  (元素，属性、路由....)
</transition>

<strong>class</strong>定义

.fade-enter{ }进入过渡的开始状态，元素被插入时生效，只应用一帧后立即删除；(运动的初始状态)

.fade-enter-active{ }进入过渡的结束状态，元素被插入时就生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

.fade-leave{ }离开过渡的开始状态，元素被删除时触发，只应用一帧后立即删除；

.fade-leave-active{ }离开过渡的结束状态，元素被删除时生效，在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

自定义过度类名

• 默认的 .fade-enter变成 .fade-in-enter

• 默认的 .fade-enter-active变成 .fade-in-active

• 默认的 .fade-leave变成 .fade-out-enter

• 默认的 .fade-leave-active变成 .fade-out-active

<transition
  name="fade"
  enter-class="fade-in-enter"
  enter-active-class="fade-in-active"
  leave-class="fade-out-enter"
  leave-active-class="fade-out-active"
>
  <p v-show="show">hello</p>
</transition>

.fade-in-active,
.fade-out-active {
  transition: all 0.5s ease;
}
.fade-in-enter,
.fade-out-active {
  opacity: 0;
}

transition相关函数

<transition
  name="fade"
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
>
  <div v-show="show"></div>
</transition>
<script>
  export default {
    methods: {
      beforeEnter(el) {
        console.log("动画enter之前");
      },
      enter(el) {
        console.log("动画enter进入");
      },
      afterEnter(el) {
        console.log("动画进入之后");
        el.style.background = "blue";
      },
      beforeLeave(el) {
        console.log("动画leave之前");
      },
      leave(el) {
        console.log("动画leave");
      },
      afterLeave(el) {
        console.log("动画leave之后");
        el.style.background = "red";
      },
    },
  };
</script>

transition结合animate.css使用

以下代码演示元素以 X 轴为基线，翻转进场出场的动画Animate.css

<!-- 翻转进场出场-->
<transition enter-active-class="flipInX" leave-active-class="flipOutX">
  <div v-show="show" class="animated"></div>
</transition>
<!-- 或者 -->
<transition
  enter-active-class="animated flipInX"
  leave-active-class="animated flipOutX"
>
  <div v-show="show"></div>
</transition>

transition Verwenden Sie zur Eingabe

<transition-group enter-active-class="flipInX" leave-active-class="flipOutX">
  <div v-show="show" :key="x" v-for="x in 5"></div>
</transition-group>

<strong>class</strong>Definition

.fade-enter{ der Übergang Der Startzustand, der beim Einfügen des Elements wirksam wird, wird sofort nach dem Anwenden nur eines Frames gelöscht (Anfangszustand der Bewegung)

.fade-enter-active{ } Betritt das Ende Status des Übergangs und das Element wird eingefügt. Es wird wirksam, wenn transition/animation abgeschlossen ist und entfernt wird. Mit dieser Klasse können Übergangsprozesszeiten, Verzögerungen und Kurvenfunktionen definiert werden.

.fade-leave{ }Verlässt den Startzustand des Übergangs, der ausgelöst wird, wenn das Element gelöscht wird, und wird sofort gelöscht, nachdem nur ein Frame angewendet wurde

.fade-leave-; aktiv{ code>Verlässt den Endzustand des Übergangs, wird wirksam, wenn das Element gelöscht wird, und wird entfernt, nachdem übergang/animation abgeschlossen ist. Mit dieser Klasse können Übergangsprozesszeiten, Verzögerungen und Kurvenfunktionen definiert werden. Benutzerdefinierter Name der Übergangsklasse

• 🎜Der standardmäßige .fade-enter wird zu .fade-in- enter🎜
• 🎜Der standardmäßige .fade-enter-active wird zu .fade-in-active🎜
🎜 Der Standard- .fade-leave wird zu .fade-out-enter🎜
• 🎜Der Standard- .fade-leave-active wird zu .fade-out-active🎜

rrreeerrreee🎜transition-bezogenen Funktionen🎜rrreee🎜transition code>Verwenden Sie 🎜🎜 🎜 in Verbindung mit <code>animate.css Der folgende Code demonstriert die Animation von Elementen, die sich auf der X-Achse als Basislinie bewegen. Klicken Sie hier für Bibliotheksadresse: https://animate.style/🎜🎜rrreee🎜Übergang der Liste🎜rrreee🎜🎜Es ist zu beachten, dass sich der Wert des Schlüssels beim Gruppieren direkt auf den Übergang der Animation auswirkt. Weitere Informationen finden Sie unter 🎜vue Der Wert des Animationsschlüssels beeinflusst die Leistung der Übergangsanimation🎜🎜 🎜🎜Empfohlenes Lernen: 🎜JavaScript-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen bei, wie Sie mit Vue Animationseffekte erzielen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!