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>Nach dem Login kopierentransition
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-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
.fade-enter
wird zu .fade-in- enter🎜
.fade-enter-active
wird zu .fade-in-active
🎜 .fade-leave
wird zu .fade-out-enter
🎜 .fade-leave-active
wird zu .fade-out-active
🎜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!