CSSTransition Component

Question

I want to animate (fade-in) a div at or after the initial mounting of a component. After the animation is done, the div shouldn't disappear. I am trying to use CSSTransition component and looking examples on reactcommunity.org but I couldn't achieve any animation at all. I don't have any value that comes from somewhere for in, so I tried both trueand false but nothing changed.

CSS

.example-enter {
  opacity: 0;
}

.example-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.example-exit {
  opacity: 1;
}

.example-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}

React

<CSSTransition classNames='example' in={false} timeout={200}>
  <div
    className='abc'
    data-description="abc">
    <div className='inner'>
       <div className='head'>A</div>
       <div className='explanation'>A</div>
    </div>
  </div>
</CSSTransition>

Answer 1

If you want to transition on the first mount set appear to true: Transition-prop-appear

You can try this:

<CSSTransition
    in={true}
    timeout={1000}
    classNames="fade"
    appear={true}
  >
    <div className="box" />
  </CSSTransition>

Css:

.fade-appear {
  opacity: 0;
  transform: scale(0.2);
}
.fade-appear-active {
  opacity: 1;
  transform: scale(1);
  transition: all 1000ms;
}

.box {
  width: 50px;
  height: 50px;
  background: aqua;
}

See my code detail here: https://codesandbox.io/s/csstransition-component-okpue

Answer 2

Another easy way is to use CSS animations. no need to set extra class for your element.

Just use it in your desired element's CSS code :

Thanks to animate.css plugin for CSS, take a look at it:

https://daneden.github.io/animate.css/

the example:

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.elem {
  padding: 40px 30px;
  background: #aaa;
  animation: fadeIn 2s;
}

<div class="elem">
  Hello, this is a text
</div>