javascript - Animation for carousel with ng-boostrap and Angular 2

Question

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.

Answer 1

I wanted a fade in/fade out the transition between slides and found a simpler solution to this:

::ng-deep {
  .carousel-item {
    transition: opacity 0.7s ease !important;
    position: absolute !important;
    display: block !important;
    opacity: 0;
  }

  .carousel-item.active {
    position: relative !important;
    opacity: 1;
  }
}

If you don't want to use ::ng-deep (it seems that is going to be deprecated, or at least I read so last week in angular.io) you can use a global styles file that will reach all classes in all components