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: [, ]*；

规定动画何时开始。默认是 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是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation © w3cplus.com

animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“1”；infinite为无限次数循环。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-animation © w3cplus.com

animation-iteration-count是用来指定元素播放动画的循环次数，其可以取值为数字，其默认值为“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：[ || || || || （播放次数）|| （方向）] [, [ || || || || || ] ]*

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

属性规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素；

值	描述
none	不改变默认行为。
forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both	向前和向后填充模式都被应用。

案列：