vue transition組件

• CSS3 transition 屬性
• CSS3 transform 屬性
• CSS3 animation 屬性

在開始正式內容以前，有個骨灰級的推薦：hover.css 顧名思義：就是包含了各類hover時效果的插件。源碼很是簡單，當咱們須要某種效果的時候，直接去源碼中拷貝少許的代碼就行。

1.transition屬性

transition屬性是一個簡寫的屬性，用於設置四個過渡屬性:

默認值: all 0 ease 0
transition-property:規定設置過渡效果的CSS屬性名稱
transition-duration:規定完成過渡效果須要多少秒或者毫秒
transition-timing-function:規定速度效果的速度曲線
    linear：規定以相同的速度開始至結束的過渡效果。
    ease：規定慢速開始，而後變快，而後慢速結束的過渡效果。
    ease-in：規定以慢速開始的過渡效果。
    ease-out：規定以慢速結束的過渡效果。
    ease-in-out：規定以慢速開始和結束的過渡效果。
    cubic-bezier(n,n,n,n)：在cubic-bezier函數中定義本身的值，可能的值是0-1之間的數值。
    
transition-delay:定義過渡效果什麼時候開始

複製代碼

2.transform 屬性

transform屬性向元素應用2D或3D轉換。該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜。

translate3d(x,y,z)：定義3D轉換
scale3d(x,y,z)：定義3D縮放
rotate(angle)：定義2D旋轉，在參數中規定角度
複製代碼

3.CSS3 animation 屬性

animation: name duration timing-function delay iteration-count direction;
animation-name：g規定須要綁定到選擇器的keyframe的名稱。
    @keyframes myfirst
    {
    from {background: red;}
    to {background: yellow;}
    }

animation-duration：規定完成動畫所花費的時間,以秒或毫秒計。
animation-timing-function：規定動畫的速度曲線。
    linear：規定以相同的速度開始至結束的過渡效果。
    ease：規定慢速開始，而後變快，而後慢速結束的過渡效果。
    ease-in：規定以慢速開始的過渡效果。
    ease-out：規定以慢速結束的過渡效果。
    ease-in-out：規定以慢速開始和結束的過渡效果。
    cubic-bezier(n,n,n,n)：在cubic-bezier函數中定義本身的值，可能的值是0-1之間的數值。
animation-delay：規定在動畫開始以前的延遲。
animation-iteration-count:規定動畫應該放的次數。
    n：定義動畫播放次數的數值
    infinite：固定動畫應該無限次播放
animation-direction：規定是否應該輪流反向播放動畫
    normal：默認值。動畫應該正常播放
    alternate：動畫應該輪流反向播放
複製代碼