一. 过渡动画

  # 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 CSSTransition 实现动画  (github 地址)  (文档)

  1. 安装 react-transition-group

    yarn add react-transition-group

  2. 引入 css-transition

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

  3. 将要 改变样式的元素用 CSSTransition 标签包裹起来

  eg:

    # 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 {CSSTransition} from 'react-transition-group'

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>

<CSSTransition

in={this.state.show}

timeout={1000}

classNames = "fade"

// 当隐藏后 去除挂载

unmountOnExit

// 当显示完成时 颜色变蓝  el 指 CSSTransition 内包裹的元素

onEntered={(el)=>{ el.style.color='red' }}

// 当退出显示时 颜色变黑  el 指 CSSTransition 内包裹的元素

onExited={(el)=>{ el.style.color='black' }}

// 第一次入场动画也要引入动画

appear={true}

>

<div className={this.state.show?'show':'hide'}>hello</div>

</CSSTransition>

<button type="button" onClick={this.DivToggle}>点一下</button>

</Fragment>

);

}

}

export default app;

    #style.css

/* 第一次加载的时候 */
.fade-appear{
opacity: 0;
}
/* 第一次入场的时候后到 第一次完成之前 */
.fade-appear-active{
opacity: 1;
transition: opacity 1s ease-in;
}
/* 入场动画执行的第一个时刻 */
.fade-enter{
opacity: 0;
}
/* 入场动画执行的第二个时刻 到 完成之前 */
.fade-enter-active{
opacity: 1;
transition: opacity 1s ease-in;
}
/* 入场动画执行的完成时刻 */
.fade-enter-done{
opacity: 1;
}
/* 出场动画开始第一个时刻 */
.fade-exit{
opacity: 1;
}
/* 出场动画开始第二个时刻到完成时刻之前 */
.fade-exit-active{
opacity: 0;
transition: opacity 1s ease-in;
}
/* 出场动画的完成时刻 */
.fade-exit-done{
opacity: 0;
}

四. 使用react-transition-group CSSTransition TransitionGroup 实现多个元素样式动画

#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 {CSSTransition, TransitionGroup} from 'react-transition-group'

import './style.css'

class app extends Component

{

constructor(props){

super(props);

this.state={

list : []

}

this.AddItem = this.AddItem.bind(this);

}

AddItem (){

this.setState((prevState)=>{

return {

list : [...prevState.list, 'item']

}

})

}

render(){

return (

<Fragment>

{/* TransitionGroup 包裹住要展示动画的元素 */}

<TransitionGroup>

{

this.state.list.map((val, index)=>{

return (

// 内部要展示样式的元素 使用 CSSTransition 包裹并边写动画效果

// 这时可以删除 in 效果 没有手动点击变换效果

<CSSTransition

timeout={1000}

classNames="fade"

onEntered={(el)=>{el.style.color="red"}}

appear={true}

key={index}

>

<div key={index} >{val}</div>

</CSSTransition>

)

})

}

</TransitionGroup>

<button type="button" onClick={this.AddItem}>点一下</button>

</Fragment>

);

}

}

export default app;

#style.css

/* 第一次加载的时候 */
.fade-appear{
opacity: 0;
}
/* 第一次入场的时候后到 第一次完成之前 */
.fade-appear-active{
opacity: 1;
transition: opacity 1s ease-in;
}
/* 入场动画执行的第一个时刻 */
.fade-enter{
opacity: 0;
}
/* 入场动画执行的第二个时刻 到 完成之前 */
.fade-enter-active{
opacity: 1;
transition: opacity 1s ease-in;
}
/* 入场动画执行的完成时刻 */
.fade-enter-done{
opacity: 1;
}
/* 出场动画开始第一个时刻 */
.fade-exit{
opacity: 1;
}
/* 出场动画开始第二个时刻到完成时刻之前 */
.fade-exit-active{
opacity: 0;
transition: opacity 1s ease-in;
}
/* 出场动画的完成时刻 */
.fade-exit-done{
opacity: 0;
}

12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画的更多相关文章

  1. Unity3D中暂停时的动画及粒子效果实现

    暂停是游戏中经常出现的功能,而Unity3D中对于暂停的处理并不是很理想.一般的做法是将Time.timeScale设置为0.Unity的文档中对于这种情况有以下描述: The scale at wh ...

  2. react中使用css动画效果

    index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...

  3. CSS过渡动画之transition

    O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...

  4. Vue——关于css过渡和动画那些事

    1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...

  5. 36.React基础介绍——2019年12月24日

    2019年12月24日16:47:12 2019年10月25日11:24:29 主要介绍react入门知识. 1.jsx语法介绍 1.1 介绍 jsx语法是一种类似于html标签的语法,它的作用相当于 ...

  6. CSS过渡、CSS动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...

  7. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  8. 第213天:12个HTML和CSS必须知道的重点难点问题

    12个HTML和CSS必须知道的重点难点问题 这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视 ...

  9. 前端总结·基础篇·CSS

    前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  ...

随机推荐

  1. web页面性能优化

    web前端页面性能优化 网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢? 其实应该是属于功能的表现.并且影响用户访问 ...

  2. Python Sphinx使用踩坑记录

    描述 使用 pip 安装sphinx后,按照教程建立了一个新的py文件,如下 # run.py def run(name): """ this is how we run ...

  3. c# copydata 消息

    using PublicCode; using System; using System.Collections.Generic; using System.ComponentModel; using ...

  4. Hadoop数据压缩技术

    一.Hadoop数据压缩及其优缺点 1.压缩技术的好处与坏处 好处: 减少存储磁盘空间 降低IO(网络的IO和磁盘的IO) 加快数据在磁盘和网络中的传输速度,从而提高系统的处理速度. 坏处: 由于使用 ...

  5. jmeter常见错误及解决方法

    jmeter常见错误:   错误一: Response code: Non HTTP response code: java.net.SocketTimeoutException Response m ...

  6. 网卡工作原理和wireshark混杂模式

    通过设置网卡为混杂模式就能捕获局域网内所有发包内容,包括非广播包和非发给自己主机的数据包 这是为什么呢? 即主机A发送一个数据包给主机B,我作为主机C怎么也能截获这个数据包呢,原理是什么? 我的网卡为 ...

  7. HDU - 6143 Killer Names(dp记忆化搜索+组合数)

    题意:从m种字母中选取字母组成姓名,要求姓和名中不能有相同的字母,姓和名的长度都为n,问能组成几种不同的姓名. 分析: 1.从m种字母中选取i种组成姓,剩下m-i种组成名. 2.i种字母组成长度为n的 ...

  8. C语言里面和时间有关的函数

    参考链接 https://blog.csdn.net/ffcjjhv/article/details/83376767 0)Head file #include "time.h" ...

  9. js使用new操作符创建对象

    转 在编写js代码时,我们有时会需要使用函数来模拟java中的类,并用它来产生对象,在定义了一个构造函数之后我们需要使用new操作符来调用调用函数才能得到我们想要的对象.例如: function Co ...

  10. 吴裕雄--天生自然JAVA SPRING框架开发学习笔记:Spring声明式事务管理(基于Annotation注解方式实现)

    在 Spring 中,除了使用基于 XML 的方式可以实现声明式事务管理以外,还可以通过 Annotation 注解的方式实现声明式事务管理. 使用 Annotation 的方式非常简单,只需要在项目 ...