900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > react大家都用什么实现动画 – CSS – 前端 css 支付宝 打钩 特效

react大家都用什么实现动画 – CSS – 前端 css 支付宝 打钩 特效

时间:2019-05-12 07:07:08

相关推荐

react大家都用什么实现动画 – CSS – 前端 css 支付宝 打钩 特效

看见这个问题偶比较感兴趣,就不请自来了,因为偶用react两年了,也遇到过一些动画的开发,偶就谈谈偶自己的经验。

首先,react最大的优势在于对操作dom性能的提升,它通过一系列的diff算法将对dom的操作次数降到最低,本质上是框架代替开发者去操作dom,开发者通过state和props去传递指令,当然开发者也可以直接操作dom,这种方式不推荐!

其次,对于开发动画,大家有如下几种方式:

1、通过css3开发动画,其中animation和transition是控制动画的核心。大家一般会开发好动画class,在特定的时机增删class(在react中可以用state控制),达到动画的效果!它比较简单,顺畅,性能好,但是对动画的控制不够精细,能实现的动画比较有限而且存在兼容性问题!

2、通过js开发动画,通常的思路是使用定时器,比如setTimeout、setInterval、requestAnimationFrame,可以在react的各个钩子函数中开发,它们对动画的控制比较精细,但是如果你使用原生的js去开发也会存在兼容性问题而且性能不好,有可能会出现卡顿等现象!

3、使用react自带插件react-transition-group

4、使用第三方动画库,如react-motion ,Animated,velocity-react等

总结,个人认为简单的动画尽量自己使用css3和js开发(前提是保证兼容性),相对于动画库,自己写的代码要少很多,页面整体的加载速度会快一点!如果遇到复杂的自己实现困难的动画可以使用优秀的第三方库,如果在使用第三方库时能够做到按需加载那就更好了,有时没办法偶会自己去分离代码库!

喜欢偶的回答就关注偶吧,有问题可以发表评论,大家一起学习,共同成长!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。