带有ng-boostrap和Angular 2的轮播动画

Question

我在ng-bootstrap中使用轮播组件。我知道正确的动画功能存在一个悬而未决的问题，该功能现在可以正确地与angular 2组件的生命周期配合使用（Github问题）。

我的问题：有没有办法将CSS用作动画的解决方法？

我放了一个可以使旋转木马渐入渐出但没有渐出渐弱的塞子。

.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中阅读过），则可以使用全局样式文件，该文件将覆盖所有组件

Answer 2

好吧，回答我自己的问题。以下CSS技巧将使动画正常运行

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

工作柱塞

Answer 3

我设法根据您的方法创建从左到右的幻灯片动画。活动幻灯片丢失时会向右过渡.active，然后新.active幻灯片会延迟动画。

虽然我建议使用ngx-swiper-wrapper- 迄今为止我发现的最好的角度旋转木马（https://idangero.us/swiper/）

.carousel-inner {
  width: 640px;
  height: 240px;
}

.carousel-item {
  padding: 40px 55px;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block !important;
}

.carousel-item.active {
  z-index: 1;
  opacity: 1;
  transition-delay: .3s;
  transform: none;
  animation: slideFromLeft .3s;
  animation-delay: .3s;
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: none;
  }
}