Animation for carousel with ng-boostrap and Angular 2

Issue

I am using the carousel component with ng-bootstrap. I understand there's an open issue for a proper animation feature that works correctly with the angular 2 component life cycle right now (Github issue).

My question: is there a way to use CSS as a workaround for the animation?

I have put up a plunker that has fade in effect for the carousel, but not fade out.

.carousel-item.active{

    -webkit-animation: fadein 1.4s; 
       -moz-animation: fadein 1.4s; 
        -ms-animation: fadein 1.4s; 
         -o-animation: fadein 1.4s; 
            animation: fadein 1.4s;

}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein { 
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Is there a way to make a fade out work? I have tried transition but failed.

Solution

Alright, answering my own question. The following CSS hack will make the animation work just fine

ngb-carousel {
    width: inherit;
    height: inherit;
}


.carousel-inner {
    overflow: visible;
}

.carousel-item {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease-in-out, visibility 1.2s;
    z-index: -1;
    position: absolute;
}

.carousel-item.active{
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

.carousel-control-prev {
     z-index: 20;
}


.carousel-control-next {
     z-index: 20;
}

.carousel-indicators{
    z-index: 20;
}

Working Plunker

Answered By - user3682091