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.
-
component: what tag we want the CSSTransitionGroup it actually is .spanis the default. -
transitionName: a very important property which we will assign the animation within which class. -
transitionEnterTimeoutandtransitionLeaveTimeoutto specify how long the animation time we want. - 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...
