React上仅使用CSS3实现简单的动画效果,以下demo实现的是简单的文字展现和消失动画
1、展现效果的React模版和简单的JS代码,主要是通过state.show的bool值控制hello的展现和消失
import React, { Component, Fragment } from 'react'
import './style.css'
class App extends Component {
constructor(props) {
super(props)
this.state = {
show: true
}
this.handleToggole = this.handleToggole.bind(this)
}
render() {
return (
<Fragment>
<div className={this.state.show ? 'show' : 'hide'}>hello</div>
<button onClick={this.handleToggole}>toggole</button>
</Fragment>
)
}
handleToggole() {
this.setState({
show: this.state.show ? false : true
})
}
}
export default App
2、style.css代码
.show {
opacity: 1;
transition: all 1s ease-in;
}
.hide {
opacity: 0;
transition: all 1s ease-in;
}
3、实现效果
4、可以再增加点更复杂的特效,修改style.css,增加keyframes,优化下变化流程
.show {
animation: show-item 1s ease-in forwards;
}
.hide {
animation: hide-item 1s ease-in forwards;
}
@keyframes show-item {
0% {
opacity: 0;
color: blue;
}
50% {
opacity: 0.5;
color: green;
}
100% {
opacity: 1;
color: red;
}
}
@keyframes hide-item {
0% {
opacity: 1;
color: red;
}
50% {
opacity: 0.5;
color: green;
}
100% {
opacity: 0;
color: blue;
}
}
5、效果如下