Heim > Artikel > Web-Frontend > Detaillierte Erläuterung von Beispielen für Animationsübergangseffekte für Vue-Elemente
Detaillierte Erläuterung von Beispielen für Animationsübergangseffekte für Vue-Elemente
- 零下一度Original
- 2018-05-14 15:58:033267Durchsuche
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 300ff3b250bc578ac201dd5fb34a0004 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>
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
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>Der Effekt ist genau der gleiche wie im vorherigen Beispiel. Das -Element kann mit -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
<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>
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.
<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>
- Sobald das js-Ereignis verwendet wird, wird das ursprüngliche CSS verwendet Animationsübergangseffekt Es wird offiziell empfohlen, v-bind:css="false" auf 4c953847164cc2bb3043fbad7679285394b3e26ee717c64999d7867364b1b4a3 zu setzen für den internen Mechanismus von Vue zur Überwachung von CSS-Animationen, um die Leistung zu verbessern.
- Eintritts- und Ausgangsereignisse müssen die Methode done manuell aufrufen, andernfalls ruft das Ereignis niemals das nachfolgende Nachereignis auf. Wenn das Nachereignis nicht aufgerufen wird, aber andere Ereignisse starten, wird es aufgerufen wurde als Animation angesehen.
<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>
- Vorher-Erscheinen, Nachher-Erscheinen, ein Ereignisrückruf ist, das Beispiel ist ziemlich klar.
- 6 Schlüssel der Animationselemente:
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>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>
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>
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>
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!