时间戳

首页 > 解决方案 > 如何在进入 dom 时为 React 组件设置动画？

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

问题描述

我在反应中有这样的代码

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

这很容易，但是当组件实际出现时，我希望它具有不透明度变化和动画效果......我一直在使用 react 一段时间，但这些情况总是给我留下混淆的空间......所以最好的和简单的解决方案？在这一点上显然没有应用课程......

标签： javascriptreactjsanimation

解决方案

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

.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：基于状态淡入 div 和淡出 div

推荐阅读