React 附件动画API ReactCSSTransitionGroup
React为动画提供了一个附加组件ReactTransitionGroup,这个附加组件是动画的底层API,并且还提供了一个附件组件ReactCSSTransitionGroup,ReactCSSTransitionGroup能够简单的实现基于css的动画和转换
高级API ReactCSSTransitionGroup
ReactCSSTransitionGroup是一个基于ReactTransitionGroup的API,当一个React组件插入或者移除DOM时,它是一种简单的去执行css转换和动画的方法
以一个demo举例
ReactCSSTransitionGroup是ReactTransitions的接口,可以把它当做一个简单的元素,它包裹着所有想添加动画效果的React组件。下面有一个例子:
var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
var React = require('react');
var ReactDOM = require('react-dom');
var data = ['one','two','three'];
var Control = React.createClass({
getInitialState:function(){
return {
'items':this.props.data
}
},
addItem:function(){
var newItems = this.state.items.concat('four');
this.setState({
'items':newItems
});
},
removeItem:function(i){
var newItems = this.state.items;
newItems.splice(i,1);
this.setState({
'items':newItems
});
},
render:function(){
var $this = this;
var List = this.state.items.map(function(value,index){
return <div key={value} onClick = {$this.removeItem.bind($this,index)}> { value}</div>
});
return (
<div>
<button onClick={this.addItem}>add Item</button>
<ReactCSSTransitionGroup
transitionName='example'
transitionEnterTimeout={500}
transitionLeaveTimeout={300}>
{List}
</ReactCSSTransitionGroup>
</div>
)
}
});
ReactDOM.render(<Control data={data}/> ,document.getElementById('content'));
对例子的解释:
(1)你需要用npm安装react-addons-css-transition-group,然后通过require在文件中引入,然后赋给一个变量,在这里将这个变量命名为ReactCSSTransitionGroup,也可以不取别的名字
(2)为每一个ReactCSSTransitionGroup组件的子元素设置一个key属性,就算它只有一个子元素。key值必须是唯一的。设置一个key属性是为了让react确定那个子元素插入了,移除了,或者保持。
(3)在这个demo中,当一个新的子元素被添加到ReactCSSTransitionGroup中,它就会得到一个example-enter CSS类名,随后它又会得到一个example-enter-active CSS类名。这些类名基于transitionName属性值。你能够使用这个类名去实现css动画。添加如下的css样式:
.example-enter {
opacity: 0.01;
} .example-enter.example-enter-active {
opacity:;
transition: opacity 500ms ease-in;
} .example-leave {
opacity:;
} .example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
这些样式中transition-duration值必须与ReactCSSTransitionGroup组件的transitionEnterTimeout和transitionLeaveTimeout属性值一一对应
(4)这个时候你点击'add Item'按钮将会以一种淡入的方式添加一个新的子元素,点击一个已经存在的子元素,这个被点击的子元素将会以一种淡出的方式被移除。
Animate Initial Mounting
ReactCSSTransitionGroup提供了一个可选的属性transitionAppear,如果将这个属性设置为true,在组件的初始化装置就会添加一个额外的转换阶段。默认情况下transitionAppear为false,如下:
render: function() {
return (
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}>
{list}
</ReactCSSTransitionGroup>
);
}
这样在初始化装载ReactCSSTransitionGroup时,它的每个子元素都会有一个example-appear CSS类接着会有一个example-appear-active CSS类,如果添加如下的样式:
.example-appear {
opacity: 0.01;
} .example-appear.example-appear-active {
opacity:;
transition: opacity .5s ease-in;
}
在ReactCSSTransitionGroup的装载阶段就会有一个淡入的动画。在初始化装载阶段,每一个ReactCSSTransitionGroup子元素都是appear而不是enter,然而,子元素进入一个已经存在的ReactCSSTransitionGroup,这个子元素是enter而不是appear
自定义类名
在上面的demo中,我们给transitionName属性设置了一个字符串example,所以,每一个阶段涉及的CSS类名都是以example开头的。我们也可以给transitionName设置一个字符串,这样可以为每一个阶段自定义类名,如下有两种设置方式:
<ReactCSSTransitionGroup
transitionName={ {
enter: 'enter',
enterActive: 'enterActive',
leave: 'leave',
leaveActive: 'leaveActive',
appear: 'appear',
appearActive: 'appearActive'
} }>
{item}
</ReactCSSTransitionGroup> <ReactCSSTransitionGroup
transitionName={ {
enter: 'enter',
leave: 'leave',
appear: 'appear'
} }>
{item2}
</ReactCSSTransitionGroup>
Animation Group Must Be Mounted To Work
为了让每一个子元素都有一个淡入和淡出的效果,子元素必须进入或离开一个已经被装载的ReactCSSTransitionGroup组件中,或者ReactCSSTransitionGroup的transitionAppear属性为true,下面这个例子就不会有淡入和淡出的效果,因为,ReactCSSTransitionGroup和一个新的子元素被单独装载,而不是子元素载入一个已经存在的ReactCSSTransitionGroup中。
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}>
<ReactCSSTransitionGroup transitionName="example">
{item}
</ReactCSSTransitionGroup>
</div>
);
}, this);
return (
<div>
<button onClick={this.handleAdd}>Add Item</button>
{items}
</div>
);
}
一个或者0个子元素
在上面的例子中ReactCSSTransitionGroup有多个子元素,实际上,ReactCSSTransitionGroup可以只有一个或者没有子元素,如下所示:
var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); var ImageCarousel = React.createClass({
propTypes: {
imageSrc: React.PropTypes.string.isRequired
},
render: function() {
return (
<div>
<ReactCSSTransitionGroup transitionName="carousel" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
<img src={this.props.imageSrc} key={this.props.imageSrc} />
</ReactCSSTransitionGroup>
</div>
);
}
});
禁用动画
如果你愿意,你能够禁用leave或者enter动画。例如,你想让子元素有一个enter动画而没有一个leave动画,但是在默认情况下,在你移除DOM节点之前,ReactCSSTransitionGroup会等待一个动画去完成。你能给ReactCSSTransitionGroup设置transitionEnter={false} 或者 transitionLeave={false}去禁用这些动画
React 附件动画API ReactCSSTransitionGroup的更多相关文章
- React常用的API说明
楼主刚开始学习react,感受到了他的博大精深,看到很多莫名的用法,不知云云,找了很多没有找到参考手册,只有在中文社区和react官方看了一些,收集了一些比较常用的API,有补充的可以楼下评论补充.后 ...
- React实现动画效果
流畅.有意义的动画对于移动应用用户体验来说是非常必要的.和React Native的其他部分一样,动画API也还在积极开发中,不过我们已经可以联合使用两个互补的系统:用于全局的布局动画LayoutAn ...
- Web动画API教程2:AnimationPlayer和Timeline
本文转载: Web动画API教程2:AnimationPlayer和Timeline
- Web动画API教程1:创建基本动画
本人转载自: Web动画API教程1:创建基本动画
- React之动画实现
React之动画实现 一,介绍与需求 1.1,介绍 1,Ant Motion Ant Motion能够快速在 React 框架中使用动画.在 React 框架下,只需要一段简单的代码就可以实现动画效果 ...
- 手写一个React-Redux,玩转React的Context API
上一篇文章我们手写了一个Redux,但是单纯的Redux只是一个状态机,是没有UI呈现的,所以一般我们使用的时候都会配合一个UI库,比如在React中使用Redux就会用到React-Redux这个库 ...
- React Hooks & Context API
React Hooks & Context API responsive website https://reactjs.org/docs/hooks-reference.html https ...
- React Native动画总结
最近在使用react native进行App混合开发,相对于H5的开发,RN所提供的样式表较少,RN中不能使用类似于css3中的动画,因此,RN提供了Animated的API 1.写一个最简单的动画 ...
- react过渡动画效果的实现,react-transition-group
本文介绍react相关的过渡动画效果的实现 有点类似vue的transition组件,主要用于组件mount和unmount之前切换时应用动画效果 安装 cnpm install react-tran ...
随机推荐
- CSS 选择器【详解】
转自:http://www.cnblogs.com/polk6/archive/2013/07/19/3142142.html CSS 选择器及各样式引用方式介绍 一个好的界面,是一个Web吸引人们最 ...
- char*或string转换成LPCWSTR
VS2010默认是Unicode的,在VC 6.0中编译成功的项目在VS2010中常会出现类型错误. 经常出现的错误是:不能从const char *转换为LPCWSTR 如使用CreateDC(&q ...
- adobe form
Call Adobe Form through ABAP Program 2015-04-24 0个评论 来源:ChampaignWolf的专栏 收藏 我要投稿 Scenar ...
- C语言之共用体
最近在复习C语言,特再次记录: 有时需要将几种不同类型的变量存放到同一段内存单元中.如一个int.float.char放在同一个地址开始的内存单元中.,也就是使用覆盖技术,几个变量相互覆盖,称之为共用 ...
- asp.net 动态添加自定义控件
前两天一直纠结asp.net动态添加控件后,后台获取不到控件的问题,查看了网上很多的回答,可能自己的理解有误或者自己所掌握的知识有限,都没有解决我遇到的问题,经过两天的研究,终于把问题解决了. 我这里 ...
- 给JavaScript初学者的24条最佳实践(share)
不错的文章,留个备份 原文链接: net.tutsplus 翻译: 伯乐在线- yanhaijing译文链接: http://blog.jobbole.com/53199/ 作为“30 HTML和 ...
- Erlang 104 OTP
笔记系列 Erlang环境和顺序编程Erlang并发编程Erlang分布式编程YawsErlang/OTP 日期 变更说明 2014-12-21 A Outline, 1 A ...
- AndroidStudio开发出现Warning:Gradle version 2.10 is required. Current version is 2.8. If u
Warning:Gradle version 2.10 is required. Current version is 2.8. If using the gradle wrapper, try ed ...
- [WCF]设置拦截器捕捉到request和reply消息
WCF进阶学习ing... 在熟练掌握了ABC的使用以后,就开始想着去了解WCF是怎么通信的了.首先是服务描述语言wsdl,它定义了服务的描述等等,用于让外界知道这个服务的ABC是什么.另外一个比较重 ...
- ImageMagick Windows x64下的安装
在windows下安装ImageMagick时,安装的版本一定要跟php的插件是同一个的,包含vc++编译的版本. 我使用的是ImageMagick-6.9.3-7-Q16-x64-dll.exe 和 ...