commons/client/src/styles/_animations.scss

.fade {
    &-enter {
        opacity: 0.01;
    }

    &-enter-active {
        opacity: 1;
        transition: opacity 400ms ease-out;
    }

    &-exit {
        opacity: 1;
    }

    &-exit-active {
        opacity: 0.01;
        transition: opacity 400ms ease-in;
    }
}

.grow {
    &-enter {
        opacity: 0.01;
        max-height: 0;
    }

    &-enter-active {
        opacity: 1;
        max-height: 500px;
        transition: 200ms ease-out;
    }

    &-exit {
        opacity: 1;
        max-height: 500px;
    }

    &-exit-active {
        opacity: 0.01;
        max-height: 0;
        transition: 200ms ease-in;
    }
}