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

Question

I have code something like this in react

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

it's easy, but when the component actually appears I want it to come in with opacity changing and animating... I've been working with react for some time but these cases always leave room for confusion for me... So whats the best and easy solution? no applying classes work obviously at this point...

Answer 1

You can use CSS transitions. Try adding the fade-in to the className of Popover 's outermost HTML element after adding the code below to the relevant CSS file.

.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 example: https://codepen.io/rodenmonte/pen/LYpOVpb

Here's a StackOverflow answer showing another (better IMO) way to do this ReactJS: Fade in div and fade out div based on state