脚本宝典收集整理的这篇文章主要介绍了React动画实现原理,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
声明: 当前为草稿阶段。@H_777_2@然后有人可以指引下怎么写草稿文章么~
web动画的实现原理
web动画的实现,最终都是需要操作dom。CSS动画,是给相应的dom元素添加动画classname
; JS动画,则是通过定时器或其他手段,不断更改dom元素属性值,达到动画的目的。
React动画的实现原理
React要实现动画,究其根本,最终的落地依然是操作dom, 从而达到页面呈现动画的目的。但是因为React与传统的web页面在代码组织、代码逻辑层面有比较大的差异。由React实现的应用,在程序逻辑中,对dom的关心程度,与传统的开发模式相比较,低了好几个层次,当然最好的状态,就是React编写的应用程序中,可以不用直接操作dom,这是最理想的状态。
为了实现这样的一些要求,React官方以及其他一些三方库,接管了对dom的操作,让我们在开发业务程序中,可以不操作dom,实现交互动画。对我们业务开发来说,不需要我们操作dom,开发体验瞬间提升好几个档次——我们都知道,操作dom是比较痛苦的事情,要不然jQuery也不会火这么多年。
React官方提供的动画库是react-transITion-group
(以前分为react-addons-transition-group
和 react-addons-css-transition-group
,现在合并成一个库了),还有一些比较出名的三方动画库如react-motion
,react-magic
,velocity-react
,rc-aniMATE
等等。
本文中会选取其中几个动画库,通过对库源代码的学习,看看它们都是怎么管理或操作dom,实现动画的。
ReactTransitionGroup
how: 怎么使用
why:为什么这么提供API
how: 怎么实现
以上是脚本宝典为你收集整理的React动画实现原理全部内容,希望文章能够帮你解决React动画实现原理所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。