Dieser Artikel stellt hauptsächlich das Vue-Element zur Realisierung von Animationen vor. Übergangseffekt Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und als Referenz geben. Folgen wir dem Editor und werfen wir einen Blick darauf.
1 Bevor Sie <transition> oder v-show verwenden, um die Anzeige und das Ausblenden eines einzelnen im v-if -Tag enthaltenen Unterelements zu ändern, wird dies der Fall sein Stellen Sie zunächst fest, ob es einen entsprechenden class -Stil gibt, der diesem Unterelement zugeordnet werden kann:
<script src="/public/javascripts/vuejs"></script>
<style>
red {background-color: red; width: 100px; height: 100px;}
redv-leave { margin-top: 50px; }
redv-leave-active { transition: all 3s;}
redv-leave-to { margin-top: 100px; opacity: 0;}
redv-enter { margin-top: 50px; }
redv-enter-active { transition: all 3s;}
redv-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<p id="app">
<transition>
<p class="red" v-show="show"></p>
</transition>
<button v-on:click="change">button</button>
</p>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function(){
thisshow = !thisshow;
}
}
});
</script>
</script>
</body>Nach dem Login kopieren
v-leave Der Strom Das Element kann vor Beginn der Animation von „Anzeige“ in „Ausgeblendet“ geändert werden. Es wird sofort gelöscht, sobald die Animation beginnt.
v-leave-active Während der Animation Übergangsprozess, das Element hat immer diesen Stil und wird automatisch gelöscht, bis die Animation endet. Wird verwendet, um den Übergangseffekt festzulegen
v-leave-to Während des Animationsübergangsprozesses , das Element hat immer diesen Stil und wird bis zum Ende der Animation automatisch gelöscht. Wird zum Festlegen des endgültigen Animationseffekts verwendet.
Wenn auf die Schaltfläche geklickt wird, p wird nicht sofort „none“ anzeigen, aber v-leave wird zuerst gesetzt und v-leave wird im nächsten Moment gelöscht, und v- wird gleichzeitig Leave-active v-leave-to hinzugefügt, wenn das Die Übergangszeit in v-leave-active ist abgeschlossen. Löschen Sie v-leave-active v-leave-to und fügen Sie display: none hinzu.
v-enter Das aktuelle Element kann vom ausgeblendeten zum angezeigten Element geändert werden. Es wird sofort gelöscht, sobald die Animation beginnt >
- v-enter-active Während des Animationsübergangsprozesses hat das Element immer diesen Stil und wird bis zum Ende der Animation automatisch gelöscht. Es wird verwendet, um den Effekt des Übergangs festzulegen ;
- v-enter-to Während des Animationsübergangsprozesses hat das Element immer diesen Stil und wird bis zum Ende der Animation automatisch gelöscht der Animation; im Fall
löscht p beim Klicken auf die Schaltfläche sofort die Anzeige: keine, dann setze v-enter, lösche v-enter im nächsten Moment und füge hinzu v-enter-active v-enter-to. Wenn die Übergangszeit in v-enter-active abgelaufen ist, löschen Sie v-enter-active v-enter-to.
2 Name der benutzerdefinierten Animationsklasse:
<script src="/public/javascripts/vuejs"></script>
<style>
red {background-color: red; width: 100px; height: 100px;}
redslide-leave { margin-top: 50px; }
redslide-leave-active { transition: all 3s;}
redslide-leave-to { margin-top: 100px; opacity: 0;}
redslide-enter { margin-top: 50px; }
redslide-enter-active { transition: all 3s;}
redslide-enter-to { margin-top: 10px; opacity: 0;}
</style>
<body>
<p id="app">
<transition name="slide">
<p class="red" v-show="show"></p>
</transition>
<button v-on:click="change">button</button>
</p>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function(){
thisshow = !thisshow;
}
}
});
</script>Nach dem Login kopieren
Der Effekt ist genau der gleiche wie im vorherigen Beispiel. Das
-Element kann mit <🎜 angegeben werden >-Attribut Verwenden Sie das Klassennamenpräfix, um das Feld transition zu ersetzen. Beispielsweise verwandelt das name im Beispiel das ursprüngliche v- in name="slide" . v-enter slide-enter
3 Wenn Übergang und Animation gleichzeitig verwendet werden
<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
0% {
margin-left: 10px;
}
100% {
margin-left: 100px;
}
}
red {background-color: red; width: 100px; height: 100px;}
blue {background-color: blue; width: 100px; height: 100px;}
v-leave { margin-top: 50px; }
v-leave-active { transition: all 3s; animation: aslide 5s;}
v-leave-to { margin-top: 100px;}
</style>
<body>
<p id="app">
<transition type="transition" >
<p class="red" v-show="show"></p>
</transition>
<br>
<transition type="animation" >
<p class="blue" v-show="show"></p>
</transition>
<button v-on:click="change">button</button>
</p>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function(){
thisshow = !thisshow;
}
}
});
</script>Nach dem Login kopieren
In diesem Fall gibt die Animation beide Übergänge an und Animationsanimation, Übergang Das Typattribut des Elements kann angeben, welche Animationszeit als Endzeit des Elements verwendet wird. Wenn die Animationsüberwachungsmethode nicht angegeben ist, hat die längste Zeit Vorrang.
4 Javascript-Überwachungsanimationen
<script src="/public/javascripts/vuejs"></script>
<style>
red {background-color: red; width: 100px; height: 100px;}
v-leave { margin-top: 50px; }
v-leave-active { transition: all 3s;}
v-leave-to { margin-top: 100px;}
</style>
<body>
<p id="app">
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<p class="red" v-show="show"></p>
</transition>
<button v-on:click="change">button</button>
</p>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function() {
thisshow = !thisshow;
consolelog('-----------click---------');
},
beforeEnter: function (el) {
consolelog('beforeEnter:');
},
enter: function (el, done) {
consolelog('enter:');
// done()
},
afterEnter: function (el) {
consolelog('afterEnter:');
},
enterCancelled: function (el) {
consolelog('enterCancelled:');
},
beforeLeave: function (el) {
consolelog('beforeLeave:');
},
leave: function (el, done) {
consolelog('leave:');
done()
},
afterLeave: function (el) {
consolelog('afterLeave:');
},
leaveCancelled: function (el) {
consolelog('leaveCancelled:');
}
}
});
</script>Nach dem Login kopieren
Sobald das js-Ereignis verwendet wird, wird das ursprüngliche CSS verwendet Animationsübergangseffekt Es wird offiziell empfohlen, v-bind:css="false" auf zu setzen für den internen Mechanismus von Vue zur Überwachung von CSS-Animationen, um die Leistung zu verbessern.
5 Animation während der Seiteninitialisierung:
<script src="/public/javascripts/vuejs"></script>
<style>
@keyframes aslide {
0% {
margin-left: 10px;
}
100% {
margin-left: 100px;
}
}
red {background-color: red; width: 100px; height: 100px;}
apper { margin-top: 50px; }
apper-active { margin-top: 100px; animation: aslide 4s; transition: all 3s;}
</style>
<body>
<p id="app">
<transition
appear
appear-class="apper"
appear-active-class="apper-active"
v-on:before-appear="customBeforeAppearHook"
v-on:appear="customAppearHook"
v-on:after-appear="customAfterAppearHook" >
<p class="red" ></p>
</transition>
<button v-on:click="change">button</button>
</p>
<script>
new Vue({
el: '#app',
data: {
show: true
},
methods: {
change: function() {
thisshow = !thisshow;
consolelog('-----------click---------');
},
customBeforeAppearHook: function (el) {
consolelog('customBeforeAppearHook:');
},
customAppearHook: function (el) {
consolelog('customAppearHook:');
// done()
},
customAfterAppearHook: function (el) {
consolelog('customAfterAppearHook:');
}
}
});
</script>Nach dem Login kopieren
< Die Das Attribut „appear“ gibt das Einschalten der Initialisierungsanimation an, das Attribut „appear-class“ gibt den Stil vor der Initialisierung an und das Attribut „appear-active-class“ gibt den Stil während des Initialisierungsanimationsprozesses an >Übergangsanimation kann nicht in der Initialisierungsanimation verwendet werden. Es funktioniert im Medium, während die Animationsanimation
- Vorher-Erscheinen, Nachher-Erscheinen, ein Ereignisrückruf ist, das Beispiel ist ziemlich klar.
show1 Warum gibt es keinen Animationseffekt? Da Vue die beiden umgeschalteten Schaltflächen als dasselbe Element erkennt, jedoch nur die unterschiedlichen Inhalte in den Schaltflächen ändert, erfolgt das Umschalten der DOM-Elemente nicht tatsächlich auf der Seite
<script src="/public/javascripts/vuejs"></script>
<style>
v-enter-active { transition: all 15s;}
v-enter-to { margin-top: 100px;}
v-leave-active { transition: all 15s;}
v-leave-to { margin-top: 10px;}
</style>
<body>
<p id="app">
<p class="show1">
<transition>
<button v-if="show1" @click="show1 = false">on</button>
<button v-else @click="show1 = true">off</button>
</transition>
</p>
<p class="show2">
<transition>
<button v-if="show2" key="on" @click="show2 = false">on</button>
<button v-else key="off" @click="show2 = true">off</button>
</transition>
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
show1: true,
show2: true
}
});
</script>Nach dem Login kopieren
Wenn Sie möchten vue Um eindeutig zu erkennen, dass es sich um zwei verschiedene Schaltflächenelemente handelt, geben Sie für jedes Element unterschiedliche Schlüsselattributwerte an.
7 Animationsmodi für den Elementwechsel:
<script src="/public/javascripts/vuejs"></script>
<style>
v-enter { margin-left: 100px;}
v-enter-active { transition: all 5s;}
v-enter-to { margin-left: 10px;}
v-leave { margin-left: 10px;}
v-leave-active { transition: all 5s;}
v-leave-to { margin-left: 100px;}
</style>
<body>
<p id="app">
<p class="default">
<transition>
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</p>
<p class="inout">
<transition mode="in-out">
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</p>
<p class="outin">
<transition mode="out-in">
<button v-if="show" key="on" @click="show = false">on</button>
<button v-else key="off" @click="show = true">off</button>
</transition>
</p>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
});
</script>Nach dem Login kopieren
transition 默认是同时执行2个元素的切换动画的，案例中红色的 off 按钮其实是会同时向左移动的，只是因为布局上没有脱离布局流，被 on 按钮顶住，无法移动；
mode="in-out" 可以使切换元素先执行将要显示元素的动画，再执行将要隐藏元素的动画；
mode="out-in" 可以使切换元素先执行将要隐藏元素的动画，再执行将要显示元素的动画；
8 多元素动画：
<script src="/public/javascripts/vuejs"></script>
<style>
v-enter { margin-left: 100px;}
v-enter-active { transition: all 2s;}
v-enter-to { margin-left: 10px;}
</style>
<body>
<p id="app">
<transition-group>
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<transition-group tag="ul">
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<button @click="itemspush(itemslength)">add</button>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
items: [0,1]
}
});
</script>Nach dem Login kopieren
transition 里面只能放置单个元素或使用 v-if v-show 切换的单个元素，要想使用多个元素的动画，必须使用 transition-group；
transition-group 默认会在 DOM 里渲染成 span 标签，可使用 tag="ul" 指定渲染成其他标签；
transition-group 必须为每一个子元素指定 key；
8 多元素的位移动画：
<script src="/public/javascripts/vuejs"></script>
<style>
v-move { transition: all 1s; }
</style>
<body>
<p id="app">
<transition-group tag="ul" >
<li v-for="item in items" :key="item">{{item}}</li>
</transition-group>
<button @click="itemsreverse()">reverse</button>
</p>
<script>
var app = new Vue({
el: '#app',
data: {
items: [0,1,2,3]
}
});
</script>Nach dem Login kopieren
transition-group 允许在每个元素移动时，添加 v-move 的样式，移动完成后自动清除该样式；
transition 的属性， transition-group 都有，包括 name enter leave；
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für Animationsübergangseffekte für Vue-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
