码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-10-11 20:02:15      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:port   index   app   dom   show   tco   安装   unit   turn   

一. 过渡动画

  # 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‘

    

 

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

标签:port   index   app   dom   show   tco   安装   unit   turn   

原文地址:https://www.cnblogs.com/zonehoo/p/11656246.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!