javascript - 使用 ng-bootstrap 和 Angular 2 的轮播动画

Question

我正在使用轮播组件 ng-bootstrap .我知道现在有一个适当的动画功能的未解决问题，该功能可以在 Angular 2 组件生命周期中正常工作 (Github issue)。

我的问题:有没有办法使用 CSS 作为动画的解决方法？

我已经放了一个plunker对轮播有淡入淡出的效果，但不会淡出。

.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; }
}

有没有办法让淡出工作？我尝试过过渡但失败了。

Answer 1

我想要淡入/淡出幻灯片之间的过渡，并找到了一个更简单的解决方案:

::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;
  }
}

如果你不想使用 ::ng-deep(它似乎将被弃用，或者至少我上周在 angular.io 中读到过)你可以使用将到达所有组件中所有类的全局样式文件