Animation

CSS transition

css transition

<div class="container">
    {
        isOpen
        ? <div class="open"></div>
        : <div class="close"></div>
    }
</div>

.container {
    transition: all 0.3s ease-out;
}

.open {
    transform: translateY(0);
}

.close {
    transform: translateY(-100%);
}

CSS @keyframe

To fine-tune the animation, use @keyframe and animation

@keyframe openModal {
    0% {
        transform: translateY(-100%);
    },
    50% {
        transform: translateY(50%);
    },
    100% {
        transform: translateY(0%);
    }
}

.open {
    animation: openModal 0.3s ease-out forwards;
}

react-transition-group

A package of React for animation. It's mostly for adding or removing elements to / from the DOM.

doc

Other packages