index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import React,{Component,Fragment} from 'react';
import './style.css';
class App extends Component{
constructor(props){
super(props);
this.state={
show:true
}
this.handleToggle=this.handleToggle.bind(this);
}
render() {
return (
<Fragment>
<div className={this.state.show?'show':'hide'}>hello</div>
<button onClick={this.handleToggle}>toggle</button>
</Fragment>
)
}
handleToggle(){
this.setState({
show:this.state.show ? false : true
})
}
}
export default App;
style.css
/* css的过渡动画效果 */
/* .show{
opacity: 1;
transition: all 1s ease-in;
}
.hide{
opacity: 0;
transition: all 1s ease-in;
} */
/* forwards可以在动画结束之后,保存动画的最后一帧css样式 */
.hide{
animation: hide-item 2s ease-in forwards;
}
.show{
animation: show-item 2s ease-in forwards;
}
@keyframes show-item{
0% {
opacity: 1;
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;
}
}