建站
咨詢
售后
建站咨詢
新聞中心
Vue 的過渡系統(tǒng)提供了非常多簡單的方法設(shè)置進入、離開和列表的動效。那么對于數(shù)據(jù)元素本身的動效呢，比如：
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供永清網(wǎng)站建設(shè)、永清做網(wǎng)站、永清網(wǎng)站設(shè)計、永清網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、永清企業(yè)網(wǎng)站模板建站服務(wù)，10余年永清做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
- 數(shù)字和運算
- 顏色的顯示
- SVG 節(jié)點的位置
- 元素的大小和其他的 property
這些數(shù)據(jù)要么本身就以數(shù)值形式存儲，要么可以轉(zhuǎn)換為數(shù)值。有了這些數(shù)值后，我們就可以結(jié)合 Vue 的響應(yīng)性和組件系統(tǒng)，使用第三方庫來實現(xiàn)切換元素的過渡狀態(tài)。
#狀態(tài)動畫與偵聽器
通過偵聽器我們能監(jiān)聽到任何數(shù)值 property 的數(shù)值更新。可能聽起來很抽象，所以讓我們先來看看使用 GreenSock 一個例子：
{{ animatedNumber }}
const Demo = {
data() {
return {
number: 0,
tweenedNumber: 0
}
},
computed: {
animatedNumber() {
return this.tweenedNumber.toFixed(0)
}
},
watch: {
number(newValue) {
gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue })
}
}
}
Vue.createApp(Demo).mount('#animated-number-demo')點擊此處實現(xiàn)
更新數(shù)字時，更改將在輸入下方設(shè)置動畫。
#動態(tài)狀態(tài)過渡
就像 Vue 的過渡組件一樣，數(shù)據(jù)背后狀態(tài)過渡會實時更新，這對于原型設(shè)計十分有用。當你修改一些變量，即使是一個簡單的 SVG 多邊形也可實現(xiàn)很多難以想象的效果。
點擊此處實現(xiàn)
#把過渡放到組件里
管理太多的狀態(tài)過渡會很快的增加組件實例復雜性，幸好很多的動畫可以提取到專用的子組件。我們來將之前的示例改寫一下：
+
= {{ result }}
const app = Vue.createApp({
data() {
return {
firstNumber: 20,
secondNumber: 40
}
},
computed: {
result() {
return this.firstNumber + this.secondNumber
}
}
})
app.component('animated-integer', {
template: '{{ fullValue }}',
props: {
value: {
type: Number,
required: true
}
},
data() {
return {
tweeningValue: 0
}
},
computed: {
fullValue() {
return Math.floor(this.tweeningValue)
}
},
methods: {
tween(newValue, oldValue) {
gsap.to(this.$data, {
duration: 0.5,
tweeningValue: newValue,
ease: 'sine'
})
}
},
watch: {
value(newValue, oldValue) {
this.tween(newValue, oldValue)
}
},
mounted() {
this.tween(this.value, 0)
}
})
app.mount('#app')點擊此處實現(xiàn)
我們能在組件中結(jié)合使用這一節(jié)講到各種過渡策略和 Vue 內(nèi)建的過渡系統(tǒng)?？傊?，對于完成各種過渡動效幾乎沒有阻礙。
你可以看到我們?nèi)绾问褂盟M行數(shù)據(jù)可視化，物理效果，角色動畫和交互，天空是極限。
#賦予設(shè)計以生命
只要一個動畫，就可以帶來生命。不幸的是，當設(shè)計師創(chuàng)建圖標、logo 和吉祥物的時候，他們交付的通常都是圖片或靜態(tài)的 SVG。所以，雖然 GitHub 的章魚貓、Twitter 的小鳥以及其它許多 logo 類似于生靈，它們看上去實際上并不是活著的。
Vue 可以幫到你。因為 SVG 的本質(zhì)是數(shù)據(jù)，我們只需要這些動物興奮、思考或警戒的樣例。然后 Vue 就可以輔助完成這幾種狀態(tài)之間的過渡動畫，來制作你的歡迎頁面、加載指示、以及更加帶有情感的提示。
Sarah Drasner 展示了下面這個 demo，這個 demo 結(jié)合了時間和交互相關(guān)的狀態(tài)改變：
點擊此處實現(xiàn)
分享文章：創(chuàng)新互聯(lián)VUE3教程：Vue 3.0 狀態(tài)過渡
文章路徑：http://m.5511xx.com/article/ccsgpoo.html
