一. 过渡动画

  # 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. Springboot注解使用总结

    使用Spring boot已经有段时间了,但是对很多注解的使用经常会遇到模糊甚至不解的地方,这次有时间便总结一下. 注解(Annotation)概念 注解是Java5开始对元数据的支持,注解与注释是有 ...

  2. java虚拟机开篇01

    一直以来对java 基础设施都啥都不知道啊,感觉有时候挺费力,挺吃劲的. 一下是一些很好的参考资料: http://blog.csdn.net/bingduanlbd/article/details/ ...

  3. 数据交互与ajax

    在Long Long Ago,那个前端还是一个切图仔的年代,那时的页面根本没有js,前端的api非常的少,页面的所有数据都来自服务器渲染,任何的页面操作都会提交form表单请求刷新页面,直到那一天,浏 ...

  4. Netty 模型

    Demo代码 使用Maven的话请在pom.xml中注入netty依赖 <!-- https://mvnrepository.com/artifact/io.netty/netty-all -- ...

  5. CentOS7 静默安装Oracle XE 11g

    Oracle XE简介 Oracle Database 11g 快捷版 (Oracle Database XE) 是一款基于 Oracle Database 11g 第 2 版代码库的小型入门级数据库 ...

  6. Vulkan 之 Debugging

    1.可以用validation layers 进行验证: 2.Snapdragon Profiler 使用说明

  7. 提交作业 C语言I作业11

    这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 http://edu.cnblogs.com/campus/zswxy/SE2019-2/homework/10127 我在这个课程的目标 ...

  8. 七十五、SAP中数据库的使用SQL

    一.在SAP中可以使用两张数据库,一直是NativeSQL和OPEN SQL. Native SQL(本地SQL)特点: 1.每种关系型数据库都有其对应的  SQL,是数据库相关的. 2.不同的 SA ...

  9. 029-PHP取随机数

    <?php //打印从1到100中间的10个随机的数 ; $index < ; $index++) { print(rand(,) . "<BR>\n"); ...

  10. Vue.js(24)之 弹窗组件封装

    同事封装了一个弹窗组件,觉得还不错,直接拿来用了: gif图展示: 弹框组件代码: <template> <transition name="confirm-fade&qu ...