css3動畫及animation在react框架的運用

學習資料：菜鳥教程；http://www.runoob.com/css3/css3-animations.html；

原文: http://www.w3cplus.com/content/css3-animation © w3cplus.com；

http://www.w3cplus.com/content/css3-transition © w3cplus.com；

如何創建動畫：

@keyframes 動畫名(logo) {

           from {}

            to{}

}

選擇器中調用：

.logo{

      animation:logo 2s(時間)

}

見實例：

像上面一個簡單的動畫效果創建好啦；

其實可以運用百分比進行調用；像from可以看做起點0%，to看作100%；

請看百分比案列：

在這中間我得爲大家介紹動畫如何在react中完成滑入滑出的效果；

先給出初始樣式；

   .anchor-person{//直播video樣式
            width: 112px;
            height: 334px/3px+0px;
            background-color: red;
            margin: auto;
        }

再寫一個滑出的動畫

@keyframes disappear {
    0%{
        width: 112px;
    }
     25%{
        width: 84px;
    }
     50%{
        width: 56px;
    }
     75%{
        width: 28px;
    }
     100%{
        width: 0px;
    }
}

再進行調用動畫；

.anchor-disappear{
            width: 0px;
            overflow: hidden;
            animation:  disappear .3s linear;
        }

再寫出現的動畫；

@keyframes arise{
    0%{
        width: 0px;
    }
     25%{
        width: 28px;
    }
     50%{
        width: 56px;
    }
     75%{
        width: 84px;
    }
     100%{
        width: 112px;
    }
}

調用：

 .anchor-arise{
            width: 112px;
            overflow: hidden;
            animation:  arise .3s linear;
        }

關鍵如何使得動畫其作用，關鍵對react的運用;

先給一個動畫類名出現的判斷標，再點擊時運用簡單的邏輯，就能達到jq中toggle方法的動畫效果；

 this.state={
        	anchorFlag:true
        }
liveAnchor(){
 		if(this.state.anchorFlag){
 			this.refs.anchorV.className='anchor-person anchor-disappear';
 			this.setState({
 				anchorFlag:false
 			})
 		}else{
 			this.refs.anchorV.className = 'anchor-person anchor-arise';
 			this.setState({
 				anchorFlag:true
 			})
 		}
 		
 	}

liveAnchor屬於點擊函數，通過ref的虛擬dom鉤子獲取div dom元素，並給該dom元素添加類名，根據anchorFlag的布爾值的設置，給該div添加不同的動畫類名，從完成該動畫效果；

按照上面的案例，大家應該會寫一些簡單的動畫了吧，接下來講解一下annimation的相關屬性：

1.animation-name：none | IDENT[,none | IDENT]*;

 none | IDENT[,none | IDENT]*;

著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

 none | IDENT[,none | IDENT]*;

著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

 none | IDENT[,none | IDENT]*;

著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

 none | IDENT[,none | IDENT]*;

著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

 none | IDENT[,none | IDENT]*;

著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

規定 @keyframes 動畫的名稱。是複合屬性animation的第一個值；

解釋：

其主要有兩個值：IDENT是由Keyframes創建的動畫名，換句話說此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實現任何動畫效果；none爲默認值，當值爲none時，將沒有任何動畫效果。另外我們這個屬性跟前面所講的transition一樣，我們可以同時附幾個animation給一個元素，我們只需要用逗號“，”隔開。著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

其主要有兩個值：IDENT是由Keyframes創建的動畫名，換句話說此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實現任何動畫效果；none爲默認值，當值爲none時，將沒有任何動畫效果。另外我們這個屬性跟前面所講的transition一樣，我們可以同時附幾個animation給一個元素，我們只需要用逗號“，”隔開。著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

其主要有兩個值：IDENT是由Keyframes創建的動畫名，換句話說此處的IDENT要和Keyframes中的IDENT一致，如果不一致,將不能實現任何動畫效果；none爲默認值，當值爲none時，將沒有任何動畫效果。另外我們這個屬性跟前面所講的transition一樣，我們可以同時附幾個animation給一個元素，我們只需要用逗號“，”隔開。

2.、animation-duration：規定動畫完成一個週期所花費的秒或毫秒。默認是 0。第二個參數；

3、animation-timing-function：規定動畫的速度曲線。默認是 "ease"。

表示速度是勻速還不勻速等等狀態值；

1、ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

2、linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).

4、ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。

著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-transition ©w3cplus.com

ease：（逐漸變慢）默認值，ease函數等同於貝塞爾曲線(0.25, 0.1, 0.25, 1.0).

linear：（勻速），linear 函數等同於貝塞爾曲線(0.0, 0.0, 1.0, 1.0).

ease-in：(加速)，ease-in 函數等同於貝塞爾曲線(0.42, 0, 1.0, 1.0).

ease-out：（減速），ease-out 函數等同於貝塞爾曲線(0, 0, 0.58, 1.0).

ease-in-out：（加速然後減速），ease-in-out 函數等同於貝塞爾曲線(0.42, 0, 0.58, 1.0)

cubic-bezier：（該值允許你去自定義一個時間曲線）， 特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個值特定於曲線上點P1和點P2。所有值需在[0, 1]區域內，否則無效。
4.transition-delay: <time> [, <time>]*；

規定動畫何時開始。默認是 0。

  transition-delay ： <time> [, <time>]* 

著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-transition ©w3cplus.com

  transition-delay ： <time> [, <time>]* 

著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-transition ©w3cplus.com

5.animation-iteration-count：規定動畫被播放的次數。默認是 1。

animation-iteration-count是用來指定元素播放動畫的循環次數，其可以取值<number>爲數字，其默認值爲“1”；infinite爲無限次數循環。著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

animation-iteration-count是用來指定元素播放動畫的循環次數，其可以取值<number>爲數字，其默認值爲“1”；infinite爲無限次數循環。著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

animation-iteration-count是用來指定元素播放動畫的循環次數，其可以取值<number>爲數字，其默認值爲“1”；infinite爲無限次數循環。

6.animation-direction規定動畫是否在下一週期逆向地播放。默認是 "normal"。

animation-direction是用來指定元素動畫播放的方向，其只有兩個值，默認值爲normal，如果設置爲normal時，動畫的每次循環都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放。著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
原文: http://www.w3cplus.com/content/css3-animation ©w3cplus.com

animation-direction是用來指定元素動畫播放的方向，其只有兩個值，默認值爲normal，如果設置爲normal時，動畫的每次循環都是向前播放；另一個值是alternate，他的作用是，動畫播放在第偶數次向前播放，第奇數次向反方向播放.

7.animation-play-state

animation-play-state主要是用來控制元素動畫的播放狀態。其主要有兩個值，running和paused其中running爲默認值。他們的作用就類似於我們的音樂播放器一樣，可以通過paused將正在播放的動畫停下了，也可以通過running將暫停的動畫重新播放，我們這裏的重新播放不一定是從元素動畫的開始播放，而是從你暫停的那個位置開始播放。另外如果暫時了動畫的播放，元素的樣式將回到最原始設置狀態。這個屬性目前很少內核支持，所以只是稍微提一下（IE9以下不支持）。

總結：animation：[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> （播放次數）|| <animation-direction>（方向）] [, [<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>] ]*

8.animation-fill-mode: none|forwards|backwards|both|initial|inherit

屬性規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。默認情況下，CSS 動畫在第一個關鍵幀播放完之前不會影響元素，在最後一個關鍵幀完成後停止影響元素；

值	描述
none	不改變默認行爲。
forwards	當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards	在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
both	向前和向後填充模式都被應用。

案列：