vue實現動畫和css3動畫屬性

一、vue動畫實現原理：

　　動畫的實現，必須通過元素的顯示隱藏或銷毀創建。v-show  v-if

　　 vue中如果需要使用動畫的時候，需要使用一個內置組件transition組件 該組件有一個name屬性 值為動畫的類名（類名隨意起）

　　

　　 實現動畫有很多方式，例如：

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

　　　　 在過渡鈎子函數中使用 JavaScript 直接操作 DOM

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

　　我們今天不說利用第三方動畫庫，自己手動利用css3 實現簡單動畫功能

二、動畫的類名

　　動畫的類名分為6個

　　入場動畫

　　　　<name>-enter      　　　　入場前

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

　　　　<name>-enter-to　　　　入場后

　　出場動畫

　　　　 <name>-leave　　　　　　出場前

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

　　　　<name>-leave-to　　　　  出場后

三、demo

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

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

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

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

四、css3　

CSS3屬性中有關於制作動畫的三個屬性： Transition（過渡）,Transform（轉換）,Animation（動畫）
　　1、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 實現一個關鍵逐幀動畫畫的功能
　　2、animation: 定義動畫之前先定義關鍵幀keyframes

　　

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

　　3、transform：

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

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

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

       　　　　 translate (0,500px)

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

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

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

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