一：过渡效果
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';//引入样式
class App
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 2s ease-in forwards;/*调用动画，forwards作用：使动画停留在最后的100%*/
}
/*//定义一个动画*/
@keyframes hide-item {
0% {
opacity:
1;color:
red}
50% {
opacity:
0.5;color:
blue}
100% {
opacity:
0;color:
green}
}
转载请注明原文地址: https://www.6miu.com/read-2624722.html
