React动画之react-transition-group使用
来源:互联网 发布:程序员多少钱一个月 编辑:程序博客网 时间:2024/06/06 02:35
代码地址请在github查看,如果有新内容,我会定时更新,也欢迎您star,issue,共同进步
写在开头的话
这其实是对React-transition-group文档的翻译。但是在其中夹杂了很多自己的理解,如有不对的地方,还请issue。运行命令如下:
- 1
- 2
- 3
- 1
- 2
- 3
1.CSS动画之CSSTransitionGroup
CSSTransitionGroup是一个基于TransitionGroup的高级API。通过它,当一个react组件添加或者移除一个DOM的时候可以轻易的实现CSS动画。你必须为CSSTransitionGroup的子级元素添加一个key属性,即使是渲染一个唯一的子元素的时候。React通过key来判断那个子级元素进入视野或者离开视野(显示或者隐藏)。下面给出一个例子:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
我们分析一下:
(1)当你给CSSTransitionGroup打上一个断点的时候,你会发现在首次加载的时候他们都被添加了appear相关的类
(2)我们的CSSTransitionGroup组件最后渲染成为的只是一个span元素,这一点通过上图你也可以看到
(3)当你点击Add按钮,并为CSSTransitionGroup打上了相应的DOM断点(subtree modification)并输入”高山上的鱼”(不断点击下一步,直到看到”高山上的鱼”节点被添加到DOM树中),你会发现该文本节点也被添加到div元素中,此时你再为该”高山上的鱼”对应的节点打上一个(attribute modification)断点,你会发现该节点会被添加enter相关的类:
而且,example-enter的添加时机要早于example-enter-active.
(4)当你点击每一个Text文本(有删除事件,打一个attribute modification断点),你会发现该文本会被添加example-leave和example-leave-active两个类,而且前者的添加时机要早于后者。
2.使用transitionName对象而非字符串
我们可以为上面说的每一步都使用自定义的class名称。此时你不是为transitionName传入一个字符串,而是一个对象。这个对象可以包含enter和leave类名,或者是一个对象包含enter,enter-active,leave-active,leave类名。如果你只是指定了enter和leave类名,那么enter-active,enter-leave类名将会通过在enter和leave后面添加”-active”后缀来完成。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
3.动画组必须是已经挂载了才会起作用
为了给CSSTransitionGroup的子级DOM添加动画效果,我们的CSSTransitionGroup必须是挂载到了DOM中了,或者transitionAppear必须设置为true。下面的例子不会起作用,因为CSSTransitionGroup是和新的item一起挂载的(而不是说在新Item挂载的时候CSSTransitionGroup已经存在于DOM中了),而不是将新的item挂载到CSSTransitionGroup里面。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
4.为单元素添加动画
上面的例子中我们为CSSTransitionGroup添加了很多的子元素。但是CSSTransitionGroup的子元素也可以是一个或者零个。这时候我们就是为单个元素添加enter或者leave动画。同样的道理:你可以使用动画效果来完成用一个新的元素来替代旧的元素效果。下面就是使用一张图片来实现旋转木马效果:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
5.禁止动画
你可以随时禁止enter或者leave动画。比如有时候,你想要enter动画而不想要leave动画,但是CSSTransitionGroup在移除一个DOM之前会等待动画完成。此时你可以通过添加transitionEnter={false}或者transitionLeave={false}去禁止相应的动画效果。
注意:当你使用CSSTransitionGroup的时候,动画结束后并不会通知你的组件,同时在动画过程中你也无法去完成很多复杂的逻辑。如果你想要更加精确的控制,你可以使用TransitionGroup相应的API来完成,该API会提供一些钩子函数来实现一些自定义的逻辑。
6.TransitionGroup API完成动画精确控制
6.1 渲染一个不同的DOM组件
你可以通过下面的方式引入:
- 1
- 1
TransitionGroup是实现动画的基础,当子级元素从TransitionGroup中移除或者添加的时候,一些特定的钩子函数将会被调用:
componentWillAppear() componentDidAppear() componentWillEnter() componentDidEnter() componentWillLeave() componentDidLeave()
默认情况下,TransitionGroup会被渲染成为一个span标签。你可以通过component属性修改选然后的DOM标签。如下面的例子将会被渲染成为一个ul元素:
- 1
- 2
- 3
- 1
- 2
- 3
任何其余的,用户自定义的属性都会成为组件自己的属性。如下面的例子展示了如何为ul标签添加一个CSS类:
- 1
- 2
- 3
- 1
- 2
- 3
任何React能够渲染的组件在这个库中都可以使用。然而,component不一定非要指定为DOM组件,它可以是任意的React组件。你只要通过指定component={List},此时你的组件将会接收到this.props.children属性。
6.2 渲染单个child的组件
大多数情况下,我们都是使用TransitionGroup来实现挂载或者卸载一个单一的child组件,例如可折叠的panel。通常情况下,TransitionGroup将会将他的所有子级组件都渲染到一个span中。这是因为每一个React组件都需要返回一个单一的root元素。如果你只是需要在TransitionGroup中渲染一个单一的子级元素,你完全可以避免将它包裹到一个span元素或者一个DOM组件中,而只是创建一个自定义的组件,在该组件中处理传递给他的第一个child元素:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
此时,你可以将FirstChild指定为TransitionGroup的component属性,而不需要对DOM进行任何包裹:
- 1
- 2
- 3
- 1
- 2
- 3
这种情况只适用于单个child的情况,例如可折叠的panel。对于存在多个child或者使用一个child来替换一种child的情况是不行的,例如图片的旋转木马效果。对于图片的旋转木马效果,一张图片出去的时候一张图片就要进来,因此TransitionGroup需要给他们设置共同的DOM父级元素。下面说明一下每一个钩子函数执行的时机:
(1)componentWillAppear(callback):
这和componentDidMount调用时机相同,当组件首次被挂载到TransitionGroup中调用。它会阻止其他动画执行,直到回调函数被调用。注意:该函数只会在TransitionGroup首次渲染的时候会调用
(2)componentDidAppear()
当传递到componentWillAppear中的回调函数被调用了以后被执行
(3)componentWillEnter(callback)
和componentDidMount的调用时机一样,当元素首次被添加到TransitionGroup中被调用。它会阻止其他动画执行,直到回调函数被调用
(4)componentDidEnter()
当传递到componentWillEnter中的回调函数被调用了以后被执行
(5)componentWillLeave(callback)
当元素从TransitionGroup中移除的时候被调用。此时虽然child被移除了,但是TransitionGroup会将它保持到DOM中,直到回调函数被调用
(6)componentDidLeave()
当传递到componentWillLeave中的回调函数被调用了以后被执行
参考文献:
React动画实践
react-transition-group
转载:http://blog.csdn.net/liangklfang/article/details/72865590
- React动画之react-transition-group使用
- React动画之react-transition-group使用
- React Native 之 动画
- vue2.0使用animate.css动画,transition&transition-group
- React Native 学习之动画
- React 之 react-router
- React Native开发之动画(Animations)
- React之动画表现(CSS3 JS rAF)
- React Native开发之动画(Animations)
- React学习之扩展动画(三十)
- React动画API之ReactTransitionGroup用法
- React-Native项目中使用动画-Animated
- React Native 之 TextInput使用
- React Native 之 ScrollView使用
- React Native 之 View使用
- React Native 之 TextInput使用
- React Native 之 TextInput使用
- react-navigation之TabNavigator使用
- Redis Sorted-Sets数据类型
- Unity3D 官方文档 UGUI总览 自动布局组件的介绍
- NYOJ 找球号(二)(哈希表)
- 使用MyBatis-generator 自动生成MyBatis mapper代码
- HDU-1257-最少拦截系统
- React动画之react-transition-group使用
- jQuery中each的用法之退出循环和结束本次循环
- spring cloud 学习(四) Hystrix
- 自动根据excel的某一列单元格的值计算,并将计算的结果给同行的下一列单元格赋值
- bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式
- Drools 规则引擎----向领域驱动进步(三)
- 嵌入式应用软件架构设计
- CSS 布局十八般武艺都在这里了
- placeholder设置字体大小与颜色