狀態過渡
Vue 的過渡系統提供了非常多簡單的方法設置進入、離開和列表的動效。那麼對於數據元素本身的動效呢，比如：
- 數字和運算
- 顏色的顯示
- SVG 節點的位置
- 元素的大小和其他的屬性
所有的原始數字都被事先存儲起來，可以直接轉換到數字。做到這一步，我們就可以結合 Vue 的響應式和組件系統，使用第三方庫來實現切換元素的過渡狀態。
狀態動畫與偵聽器
通過偵聽器我們能監聽到任何數值屬性的數值更新。可能聽起來很抽象，所以讓我們先來看看使用 GreenSock 一個例子：
當你把數值更新時，就會觸發動畫。這個是一個不錯的演示，但是對於不能直接像數字一樣存儲的值，比如 CSS 中的 color 的值，通過下面的例子我們來通過 Tween.js 和 Color.js 實現一個例子：
動態狀態過渡
就像 Vue 的過渡組件一樣，數據背後狀態過渡會實時更新，這對於原型設計十分有用。當你修改一些變量，即使是一個簡單的 SVG 多邊形也可實現很多難以想象的效果。
上述 demo 背後的代碼可以通過這個 fiddle 進行詳閱。
把過渡放到組件裡
管理太多的狀態過渡會很快的增加 Vue 實例或者組件的複雜性，幸好很多的動畫可以提取到專用的子組件。
我們來將之前的示例改寫一下：
我們能在組件中結合使用這一節講到各種過渡策略和 Vue 內建的過渡系統。總之，對於完成各種過渡動效幾乎沒有阻礙。
賦予設計以生命
只要一個動畫，就可以帶來生命。不幸的是，當設計師創建圖標、logo 和吉祥物的時候，他們交付的通常都是圖片或靜態的 SVG。所以，雖然 GitHub 的章魚貓、Twitter 的小鳥以及其它許多 logo 類似於生靈，它們看上去實際上並不是活著的。
Vue 可以幫到你。因為 SVG 的本質是數據，我們只需要這些動物興奮、思考或警戒的樣例。然後 Vue 就可以輔助完成這幾種狀態之間的過渡動畫，來製作你的歡迎頁面、加載指示、以及更加帶有情感的提示。
閱讀更多 看到他請叫他快去學習 的文章
