javascript - React 和 CSS 动画

标签 javascript css reactjs

当进行状态更改时,React 将运行协调算法并可能完全重新创建部分 DOM。

如果我将 CSS 动画或过渡应用于 DOM 节点,React 开发人员通常如何避免在动画期间干扰 DOM(这可能会停止动画)?

这是否“有效”,因为开发人员知道只有在组件生命周期的特定部分完成时(例如 onComponentDidUpdate)才开始动画(例如通过添加或删除类) - 即在他们确定不会发生进一步的主要 DOM 子树更改之后?

最佳答案

通常这应该与 Reacts dom diffing 一起“正常工作”。一种更可控的方法是将正在动画的任何 dom 移动到它自己的组件中,并使用 shouldComponentUpdate 方法来控制何时让 React 执行重新渲染。

关于javascript - React 和 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44623998/

相关文章:

javascript - 如何等到数组被填满(异步)

javascript - 如何计算 Javascript 中的 css 规则优先级?

javascript - 使用 Typescript 时将捆绑 node_modules 汇总到应用程序中

css - 以 Angular 覆盖包的CSS样式

javascript - 通过 react 中的动态键获取状态值

javascript - 如何使用Javascript在Safari中访问iPhone的新3D触摸?

javascript - 在 jquery 幻灯片上显示标题和描述

html - 试图将一堆 col-md-10 div 居中但不居中

.net - 在 AspNet Core 中调试 ReactJS 组件

javascript - 使用 graphql 和 apollo 客户端获取数据时将数据存储在状态中