React就是为了减少dom操作,那么动画效果怎么做

#1

react就是为了减少dom操作,那么动画效果怎么做

1 Like
#2

动画用CSS3来做,这样对DOM操作也没影响……
难不成你还想像JQ时代用js去写动画,手动修改left/top/width/height之类的旧方法去做么……

#3

好问题… 前端大部分用 CSS 做, 这是可以区分开的. 但是说真的我觉得也不是什么完善的方案, React Native 里就不好用这种方案了.

#4

有些能用css做,但是有的还是只能操作dom

#5

1、条件:

在真实dom处理动画,而不是在虚拟dom处理。

2、方案:

组件加载和卸载这2个节点执行的过渡动画,采用“react-transition-group”控制。

组件内部触发的动画,等到componentDidMount之后,执行动画函数。

无论怎么处理,最终都是对真实dom操作,因为对虚拟dom操作根本不可能看到效果,这个过程还只是js文件,没有渲染出来。

react减少dom操作,大部分时候减少的是dom元素的构建过程,部分动画导致需要增加或者修改dom,需求注意动画通常是改变css3,并不会改变dom的结构,如果涉及到改变真实dom的结构,也是在动画的临界点去改变,而在临界点改变dom结构就可以用到react的diff计算了。

#6

动画的临界点指的什么。
比如说涉及到display:none的时候,该在什么时机触发?

#7

动画的临界点指的什么?
比如说涉及到display:none的时候,该在什么时机触发?

#8

react 动画

#9

执行完动画触发,动画不是可以设置一个时间吗。这个时间为止就是一个临界点了

#10

你的意思是设延迟吗。。。
你说的方法我有用到过,可能只有这种方案?

#11

直接用CSS最简单,我试着用直接改inline style的方式写过,也确实没问题,不过感觉和css的实现比没太大必要

用改inline style来实现的代码

#12

那么问题来了,如果我想实现一个二级下拉菜单,css3怎么实现,请大神给出一个比较好的方案

#13

这个还真可以实现,不需要大神,八路小仙就可以写。

#14

这个不需要我给你方案,你不会CSS起码会用一下谷歌……网上一大堆这些东西。
二级下拉菜单这个操作,真心是纯CSS就能实现的东西。