react-transition-group
今天在查看 react-transition-group 的时候, 突然发现多出来了一个组件:
咦? 奇怪, 我记得以前明明只有仨啊, 啥时候更新出来的?
好奇心驱使我点了进去新出现的那个 SwitchTransition
真是不看不得了, 一看吓一跳啊!
考虑到大家的英文水平...
(当然这句话好像不用啥英语水平都能看懂).
我来给大家翻译一下:
这是一个受到 vue transition modes 启发的过渡组件. 说实话 vue 和 react 我都经常用, 一直都觉得 vue 的 transition 组件和 react 的 react-transition-group 可像可像的了, 几乎就是换了个别名, 用法啥的都差不多, 也不知道到底是谁抄的谁, 也许他俩都是抄的 Angular 的动画库 ng-animate.
哦~ 不对, 应该叫启发, 是谁受到了谁的启发 (有没有感觉换了一个词瞬间就变得高大上了起来), 其实本来大家都是开源的, 把好的东西吸收借鉴过来是非常好的一件事情, 但是由于 vue 一直给人的印象都是一个非常优秀的借鉴者而不是非常优秀的创新者, 而 React 恰恰相反.
所以大家潜意识里一直以为是 vue 借鉴的 react, 直到今天我才发现原来 vue 早已拥有的模式, react-transition-group 才刚刚实现, 那就是过渡模式
vue 的 transition
其实 vue 的官网描述的已经非常详细了, 所以在这里我就不再重复叙述了, 给大家一个传送门: vue transition modes, 总而言之它实现了这么一个炫酷的功能: 在你的组件切换的时候, 可以让将要移除的组件和将要进入的组件有个动画效果, 这两个动画效果还有个时间差, 时间差有两种模式, 一是将要移除的组件先来个动画, 比如淡出, 等它淡出完了, 新的组件再淡入, 这样的时间差形成了完整的一套淡入淡出效果, 另一种模式则完全相反, 先新的组件淡入, 再把老组件淡出.
SwitchTransition
然而就是在 vue 中很轻松就可以实现的炫酷效果在 react 中却没有对应的封装好的组件, 只能自己很麻烦的实现, 于是乎 SwitchTransition 横空出世啦!
用法:
首先 react 的过渡组件并不像 vue 那样直接集成在 vue 核心库之中, 而是需要手动的去安装:
接着我们就来用 react 来模仿一下 vue 的官方案例:
至此我们就实现了 vue 官网过渡模式的第一个例子↑↑↑
接下来我们实现第二个例子↓↓↓
第一个例子是默认模式: mode="out-in" 看名字就很容易理解: 旧组件先执行出场动画, 然后新组件再执行入场动画.
第二个例子是: mode="in-out" 看动态图就明白了: 先进后出.
在 SwitchTransition 组件上一共就只有 mode 这么一个属性, 属性一共就只有俩值: out-
in,in-out, 如果是 out-in 的话甚至连属性都可以省略不写了, 因为是默认属性.
注意事项:
- <SwitchTransition>
- 组件里面要有
- < CSSTransition>
- 或者
- < Transition>
- 组件, 不能直接包裹你想要切换的组件.
- <SwitchTransition>
- 里面的
- < CSSTransition>
- 或
- < Transition>
- 组件不再像以前那样接受 in 属性来判断元素是何种状态, 取而代之的是 key 属性,
- <SwitchTransition>
- 底层是通过 key 属性来判断组件该执行移入还是移出动画的.
结束语:
怎么样是不是很好玩呢, 带大家复习了一遍 Vue 的同时顺便又学习了一下 react-transition-group 的新组件, 赶紧打开命令行 create 个 react-App 然后 yarn add react-transition-group 一下吧!
作者: 流连牛年榴莲甜
原创内容来自: http://t.cn/A67XgZ1y
我目前是在职前端开发, 如果你现在也想学习前端开发技术, 在入门学习前端的过程当中有遇见任何关于学习方法, 学习路线, 学习效率等方面的问题, 你都可以申请加入我的前端学习交流裙: 前面: 603 中间: 985 最后: 993. 里面聚集了一些正在自学前端的初学者, 裙文件里面也有我做前端技术这段时间整理的一些前端学习手册, 前端面试题, 前端开发工具, PDF 文档书籍教程, 需要的话都可以自行来获取下载.
来源: http://www.jianshu.com/p/144286a1f428