React使用原生CSS3动画入门

直接上例子，利用原生CSS3实现了一个非常简单的点击切换显示和隐藏，主要利用了trasition过渡效果，下面介绍一下参数和使用方法：

//jsx
constructor(props){
        super(props);
        this.state = {
            show: true
        }
    }

    render() {
        return (
            <Fragment>
                <div className={this.state.show ? 'show' : 'hide'}>hello</div>
                <button onClick={this.handleToggole}>toggle</button>
            </Fragment>
        )
    }

    handleToggole: ()=> {
        this.setState({
            show: this.state.show ? false : true
        })
    }

//css
.show {
    opacity: 1;
    transition: all 1s ease-in 0; //过渡效果
}

.hide {
    opacity: 0;
    transition: all 1s ease-in 0;
}

transition接收4个参数，分别是:

transition: property //应用的css属性
            duration //第一个参数为all，动画持续时间
            timing-function //时间曲线
            delay //延迟多少毫秒后执行

第1个参数的all为全部，也可以拆分到具体属性，如：

transition: background 1s ease 2s, 
            border-radius 3s ease 1s;

关于第3个参数时间曲线下面给大家列出了内置选项，请大家打开浏览器F12自行查看详细的曲线

linear  规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)   在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

我们也可以用@keyframes自定义动画效果，类似于flash中的帧数，我们将css文件改写如下内容：

//css
.show {
    animation: show-item 2s ease-in forwards; 
}

.hide {
    animation: hide-item 2s ease-in forwards;
}

@keyframes show-item {
    0% {
        opacity: 0;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 1;
        color: blue;
    }
} 

@keyframes hide-item {
    0% {
        opacity: 1;
        color: red;
    }
    50% {
        opacity: 0.5;
        color: green;
    }
    100% {
        opacity: 0;
        color: blue;
    }
} 

animation也是一个简写属性，以下是详细的属性值：

animation-name //规定需要绑定到选择器的 keyframe 名称。
animation-duration //规定完成动画所花费的时间，以秒或毫秒计。 
animation-timing-function //规定动画的速度曲线。 
animation-delay //规定在动画开始之前的延迟，默认是0，可以省略。
animation-iteration-count //规定动画应该播放的次数。
animation-direction //规定是否应该轮流反向播放动画。

这里还要注意，forwards其实不是属于animation的属性值，而是animation-fill-mode的一个属性，如果不加forwards，动画结束后会回到最初始的状态，加上forwards动画结束后会保存结束的状态。