Heim > Web-Frontend > View.js > Hauptteil

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

奋力向前
Freigeben: 2021-08-19 09:47:49
nach vorne
3167 Leute haben es durchsucht

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.

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

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>
Nach dem Login kopieren

transition 使用

<transition name="fade">
  (元素,属性、路由....)
</transition>
Nach dem Login kopieren

<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>
Nach dem Login kopieren
.fade-in-active,
.fade-out-active {
  transition: all 0.5s ease;
}
.fade-in-enter,
.fade-out-active {
  opacity: 0;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:chuchur.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage