Animation Addons in React

Sometimes we need some effect of animation when the components mounted or unmounted, if using the React API, we have so much work to do like that change class by componentDidMount or ComponentWIllUnmount .Lucky there has a choose to reach our goal .

import CSSTransitionGroup from 'react-addons-css-transition-group';

With Addons we can easily avoid difficulties .

const renderCard = ({ title, id, date, brief, genre, image }, key) =>
      <Card
        key={key}
        id={id}
        title={title}
        date={date}
        brief={brief}
        genre={genre}
        image={image}
      />;
    return (
      <CSSTransitionGroup
        component={Panel}
        transitionName="card"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={300}
      >
        {matchCard().map(renderCard)}
      </CSSTransitionGroup>
    );
  }

This is a render function.

1. component : what tag we want the CSSTransitionGroup it actually is . span is the default.
2. transitionName: a very important property which we will assign the animation within which class.
3. transitionEnterTimeout and transitionLeaveTimeout to specify how long the animation time we want.
4. Just the child components will have animations , so must parse the child component into the CSSTransitionGroup.

So .. after mounting , the components will be added a class named card-enter. what name we assign in the transitionName what prefix will be specified.

.card-enter {
    opacity: 0;
  }

.card-enter.card-enter-active {
    opacity: 1;
  }

Now our components named Card will fade in and fade out.

If using moduleCSS you must use global style.

:global{
  .card-enter {
    opacity: 0;
    transform: scale(1.5);
  }
  .card-enter.card-enter-active {
    opacity: 1;
    transform: scale(1);
  }
  .card-leave {
    opacity: 0.1;
  }
}

Like this...