Vue的過渡系統提供了許多簡單的方法來動畫進入，離開和列表，但動畫數據本身又如何呢？例如：

• 數字和計算
• 顯示顏色
• SVG節點的位置
• 元素的大小和其他屬性

所有這些都已經存儲為原始數字或可以轉換為數字。一旦我們這樣做了，我們就可以使用第三方庫對這些狀態更改進行動畫處理，以結合Vue的反應性和組件系統。

用觀察者動畫狀態

觀察者允許我們將任何數值屬性的變化動畫成另一個屬性。這聽起來可能聽起來很復雜，所以我們來深入一個使用Tween.js的例子：

{{ animatedNumber }}

new Vue({ el: '#animated-number-demo', data: { number: 0, animatedNumber: 0 }, watch: { number: function(newValue, oldValue) { var vm = this function animate () { if (TWEEN.update()) { requestAnimationFrame(animate) } } new TWEEN.Tween({ tweeningNumber: oldValue }) .easing(TWEEN.Easing.Quadratic.Out) .to({ tweeningNumber: newValue }, 500) .onUpdate(function () { vm.animatedNumber = this.tweeningNumber.toFixed(0) }) .start() animate() } }})

當您更新號碼時，更改會在輸入下面顯示動畫。這使得一個很好的演示，但什么東西不是直接存儲為一個數字，如任何有效的CSS顏色，例如？以下是我們如何通過添加Color.js來實現這一點：

Update

Preview:

{{ tweenedCSSColor }}

var Color = net.brehaut.Colornew 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;}

動態狀態轉換

與Vue的轉換組件一樣，數據支持狀態轉換可以實時更新，這對原型設計特別有用！即使使用簡單的SVG多邊形，也可以實現許多難以想象的效果，直到您稍稍使用變量。

請參閱此fiddle以獲取上述演示背后的完整代碼。

將轉換組織成組件

管理許多狀態轉換可能會快速增加Vue實例或組件的復雜性。幸運的是，許多動畫可以提取出專用的子組件。我們用前面例子的動畫整數來做這件事：

+ = {{ result }}

+ =

// This complex tweening logic can now be reused between// any integers we may wish to animate in our application.// Components also offer a clean interface for configuring// more dynamic transitions and complex transition// strategies.Vue.component('animated-integer', { template: '{{ tweeningValue }}', 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() } }})// All complexity has now been removed from the main Vue instance!new Vue({ el: '#example-8', data: { firstNumber: 20, secondNumber: 40 }, computed: { result: function () { return this.firstNumber + this.secondNumber } }})

總結

以上是生活随笔為你收集整理的vue中显示和隐藏如何做动画_vue-State Transitions（状态转换）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。