React之过渡和动画效果

一：过渡效果

1：效果图




2：目录结构（利用官方脚手架进行删减）




3：index.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from
'./App'; ReactDOM.render(<App />, document.getElementById('root'));
4：App.js
import React, { Component ,Fragment} from 'react'; import './style.css';//引入样式
classApp extends Component { constructor(props) { super(props); this.state = {
show:true, } } render() { return ( <Fragment>{/*一个占位符，只是为了包裹,不渲染*/} <div> <h1
className={this.state.show?'show':'hide'}>HELLO</h1> </div> <button onClick={
this.handleToggle}>toggle</button> </Fragment> ); } handleToggle=()=>{ this.
setState({ show:this.state.show? false:true, }) } } export default App;
5: style.css
.show{ opacity: 1; transition: all 1s ease-in ; } .hide{ opacity: 0; transition
:all 1s ease-in ; }
二：动画效果

1：效果图


2：style.css（其它文件保持不变）
.show{ opacity: 1; transition: all 1s ease-in ; } .hide{ animation: hide-item 2
s ease-in forwards;/*调用动画，forwards作用：使动画停留在最后的100%*/ } /*//定义一个动画*/ @keyframes
hide-item{ 0% {opacity: 1;color:red} 50% {opacity: 0.5;color:blue} 100% {opacity
:0;color:green} }

• « 上一篇：Win10教育版education最新激活密钥和纯净版下载地
• » 下一篇：数据分析师、大数据开发、Hadoop开发工程师、数据挖掘、算法工程师的工资薪水到底怎么样？