如何在进入 dom 时为 React 组件设置动画？答案

【问题标题】：How do I animate React component upon entering the dom?如何在进入 dom 时为 React 组件设置动画？
【发布时间】：2020-05-03 03:17:41
【问题描述】：

我在反应中有这样的代码

{this.state.popoverOpen && <Popover/>}

这很简单，但是当组件实际出现时，我希望它具有不透明度变化和动画效果...... 我一直在使用 react 一段时间，但这些案例总是给我留下困惑的空间...... 那么最好和简单的解决方案是什么？在这一点上显然没有应用类工作......

【问题讨论】：

你能再描述一下吗。问到底是什么。据我所知，您希望 React 组件表现为延迟加载？

标签： javascript reactjs animation

【解决方案1】：

您可以使用 CSS 过渡。将以下代码添加到相关 CSS 文件后，尝试将 fade-in 添加到 Popover 的最外层 HTML 元素的 className。

.fade-in {
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
  -ms-animation: fadein 2s; /* Internet Explorer */
  -o-animation: fadein 2s; /* Opera < 12.1 */
  animation: fadein 2s;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

Codepen 示例：https://codepen.io/rodenmonte/pen/LYpOVpb

这是一个 StackOverflow 答案，显示了另一种（更好的 IMO）方法ReactJS: Fade in div and fade out div based on state

【讨论】：