12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画
一. 过渡动画
# 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
四. 使用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
12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画的更多相关文章
- Unity3D中暂停时的动画及粒子效果实现
暂停是游戏中经常出现的功能,而Unity3D中对于暂停的处理并不是很理想.一般的做法是将Time.timeScale设置为0.Unity的文档中对于这种情况有以下描述: The scale at wh ...
- react中使用css动画效果
index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...
- CSS过渡动画之transition
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...
- Vue——关于css过渡和动画那些事
1. 单元素/组件的过渡transition Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v ...
- 36.React基础介绍——2019年12月24日
2019年12月24日16:47:12 2019年10月25日11:24:29 主要介绍react入门知识. 1.jsx语法介绍 1.1 介绍 jsx语法是一种类似于html标签的语法,它的作用相当于 ...
- CSS过渡、CSS动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script s ...
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- 第213天:12个HTML和CSS必须知道的重点难点问题
12个HTML和CSS必须知道的重点难点问题 这12个问题,基本上就是HTML和CSS基础中的重点个难点了,也是必须要弄清楚的基本问题,其中定位的绝对定位和相对定位到底相对什么定位?这个还是容易被忽视 ...
- 前端总结·基础篇·CSS
前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;} /* IE8+ */body {margin:0;} ...
随机推荐
- web页面性能优化
web前端页面性能优化 网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢? 其实应该是属于功能的表现.并且影响用户访问 ...
- Python Sphinx使用踩坑记录
描述 使用 pip 安装sphinx后,按照教程建立了一个新的py文件,如下 # run.py def run(name): """ this is how we run ...
- c# copydata 消息
using PublicCode; using System; using System.Collections.Generic; using System.ComponentModel; using ...
- Hadoop数据压缩技术
一.Hadoop数据压缩及其优缺点 1.压缩技术的好处与坏处 好处: 减少存储磁盘空间 降低IO(网络的IO和磁盘的IO) 加快数据在磁盘和网络中的传输速度,从而提高系统的处理速度. 坏处: 由于使用 ...
- jmeter常见错误及解决方法
jmeter常见错误: 错误一: Response code: Non HTTP response code: java.net.SocketTimeoutException Response m ...
- 网卡工作原理和wireshark混杂模式
通过设置网卡为混杂模式就能捕获局域网内所有发包内容,包括非广播包和非发给自己主机的数据包 这是为什么呢? 即主机A发送一个数据包给主机B,我作为主机C怎么也能截获这个数据包呢,原理是什么? 我的网卡为 ...
- HDU - 6143 Killer Names(dp记忆化搜索+组合数)
题意:从m种字母中选取字母组成姓名,要求姓和名中不能有相同的字母,姓和名的长度都为n,问能组成几种不同的姓名. 分析: 1.从m种字母中选取i种组成姓,剩下m-i种组成名. 2.i种字母组成长度为n的 ...
- C语言里面和时间有关的函数
参考链接 https://blog.csdn.net/ffcjjhv/article/details/83376767 0)Head file #include "time.h" ...
- js使用new操作符创建对象
转 在编写js代码时,我们有时会需要使用函数来模拟java中的类,并用它来产生对象,在定义了一个构造函数之后我们需要使用new操作符来调用调用函数才能得到我们想要的对象.例如: function Co ...
- 吴裕雄--天生自然JAVA SPRING框架开发学习笔记:Spring声明式事务管理(基于Annotation注解方式实现)
在 Spring 中,除了使用基于 XML 的方式可以实现声明式事务管理以外,还可以通过 Annotation 注解的方式实现声明式事务管理. 使用 Annotation 的方式非常简单,只需要在项目 ...