vue實現動畫和css3動畫屬性

1、vue動畫實現原理：

　　動畫的實現，必須經過元素的顯示隱藏或銷燬建立。v-show  v-if

　　 vue中若是須要使用動畫的時候，須要使用一個內置組件transition組件 該組件有一個name屬性 值爲動畫的類名（類名隨意起）

　　

　　 實現動畫有不少方式，例如：

　　　　 能夠配合使用第三方 CSS 動畫庫，如 Animate.css

　　　　 在過渡鉤子函數中使用 JavaScript 直接操做 DOM

　　　　 能夠配合使用第三方 JavaScript 動畫庫，如 Velocity.js

　　咱們今天不說利用第三方動畫庫，本身手動利用css3 實現簡單動畫功能

2、動畫的類名

　　動畫的類名分爲6個

　　入場動畫

　　　　<name>-enter      　　　　入場前

　　　　<name>-enter-active　　  入場持續的過程

　　　　<name>-enter-to　　　　入場後

　　出場動畫

　　　　 <name>-leave　　　　　　出場前

　　　　<name>-leave-active　　　出場持續的過程

　　　　<name>-leave-to　　　　  出場後

3、demo

　　html和技術部分代碼：經過點擊按鈕讓盒子進行顯示隱藏（v-if和v-show均可以）

經過css代碼，實現具體的動畫效果，本案例實現的是對盒子進行放大的動畫。

　　用animation作動畫時，把效果給<name>-enter-active   <name>-leave-active

　　或name>-enter-to<name>-leave-to均可以

4、css3　

CSS3屬性中有關於製做動畫的三個屬性： Transition（過渡）,Transform（轉換）,Animation（動畫）
　　一、transtion:
　　　　transition-property 須要過渡的樣式 （all || [attr] || none）默認是 all
　　　　transition-duration 運動時間 默認是 0 s
　　　　transition-delay 延遲時間 默認是 0
　　　　transition: (過渡樣式、運動時間、延遲時間)

　　　　transition-timing-function 運動形式 默認是 ease
　　　　　　ease：（慢速開始，而後變快，而後慢速結束） linear：（勻速） ease-in：(加速)
　　　　　　ease-out：（減速）
　　　　　　ease-in-out：（先加速後減速）
　　　　　　cubic-bezier 貝塞爾曲線（ x1, y1, x2, y2 ）
　　　　　　steps 實現一個關鍵逐幀動畫畫的功能
　　二、animation: 定義動畫以前先定義關鍵幀keyframes

　　

　　animation和transition的區別？
　　相同點：都是隨着時間改變元素的屬性值。
　　不一樣點：
　　　　transition須要觸發一個事件(hover事件或click事件等)纔會隨時間改變其css屬性；
　　　　而animation在不須要觸發任何事件的狀況下也能夠顯式的隨着時間變化來改變元素css的屬性值，從而達到一種動畫的效果。

　　三、transform：

                    向元素應用2D或3D轉換。對元素進行旋轉、縮放、移動或傾斜

　　　　一、translate ()根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。相似於定位中的left值（X軸）、top值（Y軸） 

         　　　使用translate()函數，你能夠把元素從原來的位置移動，而不影響在X、Y軸上任何組件。

       　　　　 translate (0,500px)

　　　　二、rotate() 在一個給定度數順時針旋轉的元素。負值是容許的，這樣是元素逆時針旋轉。rotate(360deg )

　　　　三、 scale()該元素增長或減小的大小，取決於寬度（X軸）和高度（Y軸）的參數：

       　　　　 縮放scale()函數讓元素根據中心原點對對象進行縮放。默認的值1。所以0.01到0.99之間的任何值，使一個元素縮小；而任何大於或等於1.01的值，讓元素顯得更大。

　　經常使用的transform的屬性就是這些。