peralihan negeri
Jadual Kandungan
- dalam peralihan
- Sistem peralihan Vue menyediakan banyak kaedah mudah untuk menetapkan animasi masuk, keluar dan senarai. Bagaimana pula dengan animasi elemen data itu sendiri, seperti:
- paparan warna
- Kedudukan nod SVG
- atribut ini
- saiz elemen dan lain-lain sama ada disimpan secara semula jadi sebagai nilai angka atau boleh ditukar kepada nilai angka. Dengan mengambil kira nilai-nilai ini, kami boleh menggabungkan responsif Vue dan sistem komponen serta menggunakan perpustakaan pihak ketiga untuk melaksanakan keadaan peralihan elemen pensuisan.
Animasi status dan pendengar
Melalui pendengar kita boleh memantau kemas kini nilai sebarang atribut berangka. Ia mungkin kedengaran abstrak, jadi mari kita lihat dahulu contoh menggunakan GreenSock:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<div id="animated-number-demo">
<input v-model.number="number" type="number" step="20">
<p>{{ animatedNumber }}</p>
</div>new Vue({
el: '#animated-number-demo',
data: {
number: 0,
tweenedNumber: 0
},
computed: {
animatedNumber: function() {
return this.tweenedNumber.toFixed(0);
}
},
watch: {
number: function(newValue) {
TweenLite.to(this.$data, 0.5, { tweenedNumber: newValue });
}
}
})
Apabila anda mengemas kini nilai, animasi akan dicetuskan. Ini adalah demonstrasi yang baik, tetapi untuk nilai yang tidak boleh disimpan secara langsung seperti nombor, seperti nilai warna dalam CSS, melalui contoh berikut kami akan melaksanakan contoh melalui
dan 
Color.js
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<script src="https://cdn.jsdelivr.net/npm/color-js@1.0.3"></script>
<div id="example-7">
<input
v-model="colorQuery"
v-on:keyup.enter="updateColor"
placeholder="Enter a color"
>
<button v-on:click="updateColor">Update</button>
<p>Preview:</p>
<span
v-bind:style="{ backgroundColor: tweenedCSSColor }"
class="example-7-color-preview"
></span>
<p>{{ tweenedCSSColor }}</p>
</div>var Color = net.brehaut.Color
new Vue({
el: '#example-7',
data: {
colorQuery: '',
color: {
red: 0,
green: 0,
blue: 0,
alpha: 1
},
tweenedColor: {}
},
created: function () {
this.tweenedColor = Object.assign({}, this.color)
},
watch: {
color: function () {
function animate () {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}
new TWEEN.Tween(this.tweenedColor)
.to(this.color, 750)
.start()
animate()
}
},
computed: {
tweenedCSSColor: function () {
return new Color({
red: this.tweenedColor.red,
green: this.tweenedColor.green,
blue: this.tweenedColor.blue,
alpha: this.tweenedColor.alpha
}).toCSS()
}
},
methods: {
updateColor: function () {
this.color = new Color(this.colorQuery).toRGB()
this.colorQuery = ''
}
}
}).example-7-color-preview {
display: inline-block;
width: 50px;
height: 50px;
} 
Peralihan keadaan dinamik
Sama seperti komponen peralihan Vue, peralihan keadaan di belakang masa nyata, yang akan dikemas kini dalam masa nyata. Apabila anda mengubah suai beberapa pembolehubah, poligon SVG yang mudah pun boleh mencapai banyak kesan yang tidak dapat dibayangkan.
Kod di sebalik demo di atas boleh dibaca secara terperinci melalui
. 
Masukkan peralihan ke dalam komponen
Menguruskan terlalu banyak peralihan keadaan boleh meningkatkan kerumitan contoh atau komponen Vue dengan cepat.
Mari kita tulis semula contoh sebelumnya:<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<div id="example-8">
<input v-model.number="firstNumber" type="number" step="20"> +
<input v-model.number="secondNumber" type="number" step="20"> =
{{ result }}
<p>
<animated-integer v-bind:value="firstNumber"></animated-integer> +
<animated-integer v-bind:value="secondNumber"></animated-integer> =
<animated-integer v-bind:value="result"></animated-integer>
</p>
</div>// 这种复杂的补间动画逻辑可以被复用
// 任何整数都可以执行动画
// 组件化使我们的界面十分清晰
// 可以支持更多更复杂的动态过渡
// 策略。
Vue.component('animated-integer', {
template: '<span>{{ tweeningValue }}</span>',
props: {
value: {
type: Number,
required: true
}
},
data: function () {
return {
tweeningValue: 0
}
},
watch: {
value: function (newValue, oldValue) {
this.tween(oldValue, newValue)
}
},
mounted: function () {
this.tween(0, this.value)
},
methods: {
tween: function (startValue, endValue) {
var vm = this
function animate () {
if (TWEEN.update()) {
requestAnimationFrame(animate)
}
}
new TWEEN.Tween({ tweeningValue: startValue })
.to({ tweeningValue: endValue }, 500)
.onUpdate(function () {
vm.tweeningValue = this.tweeningValue.toFixed(0)
})
.start()
animate()
}
}
})
// 所有的复杂度都已经从 Vue 的主实例中移除！
new Vue({
el: '#example-8',
data: {
firstNumber: 20,
secondNumber: 40
},
computed: {
result: function () {
return this.firstNumber + this.secondNumber
}
}
})
Kita boleh menggunakannya bersama-sama dengan komponen Bahagian ini bercakap tentang pelbagai strategi peralihan dan sistem peralihan terbina dalam Vue. Pendek kata, hampir tiada halangan untuk menyelesaikan pelbagai kesan peralihan.
Hidupkan reka bentuk
Hanya animasi boleh menghidupkan. Malangnya, apabila pereka bentuk mencipta ikon, logo dan maskot, ia sering dihantar sebagai imej atau SVG statik. Jadi, walaupun kucing sotong GitHub, burung Twitter, dan banyak logo lain menyerupai makhluk hidup, mereka sebenarnya tidak kelihatan hidup. Vue boleh membantu anda. Memandangkan sifat SVG ialah data, kami hanya memerlukan contoh haiwan ini teruja, berfikir atau berwaspada. Kemudian Vue boleh membantu dalam melengkapkan animasi peralihan antara negeri ini untuk membuat halaman alu-aluan anda, memuatkan arahan dan lebih banyak gesaan emosi. Sarah Drasner menunjukkan demo berikut, yang menggabungkan masa dan perubahan keadaan berkaitan interaksi:
