当前位置 : 主页 > 网页制作 > React >

12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画

来源:互联网 收集:自由互联 发布时间:2021-06-15
一. 过渡动画 # 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 ‘

一. 过渡动画

  # 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.DivToggle = this.DivToggle.bind(this);
}
DivToggle(){
console.log(this.state.show)
this.setState({
show: this.state.show ? false : true
})
}
render() {
return (
<Fragment>
<div className={this.state.show? ‘show‘: ‘hide‘}>你好啊</div>
<button onClick={this.DivToggle}>toggle</button>
</Fragment>
)
}
}
export default app;

  # style.css

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

 

二.动画效果

  使用 keyframes 进行渲染 动画

# style.css

.show{
/* 使用 forwards css 动画最后一帧 保存 样式*/
animation: show-item 2s ease-in forwards;
}
.hide{
/* 使用 forwards css 动画最后一帧 保存 样式*/
animation: hide-item 2s ease-in forwards;
}

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

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

 

三. 使用 react-transition-group 实现动画  (github 地址)  (文档)

  1. 安装 react-transition-group

    yarn add react-transition-group

  2. 引入 css-transition 

    import { CSSTransition } fron ‘react-transition-group‘

网友评论