ngb-carousel 如何在图像/幻灯片之间进行淡入/淡出等动画？答案

【问题标题】：ngb-carousel how can I have animation like fade-in/out between Images/Slides?ngb-carousel 如何在图像/幻灯片之间进行淡入/淡出等动画？
【发布时间】：2017-12-11 01:52:54
【问题描述】：

在 Ng 引导轮播组件中，如何在图像/幻灯片之间进行淡入/淡出等过渡？

【问题讨论】：

look this exact answer like you mentioned

标签： animation transition ng-bootstrap

【解决方案1】：

我找到了一种方法来包含像动画一样的淡入/淡出。

您必须按如下方式定义 .carousel-item 和 .carousel-item.active css 类：

.carousel-item {
    display: block !important;
    z-index: 1;
    position: absolute;
    opacity: 0;
    transition: opacity 1.5s ease-in-out, visibility 1s;
    visibility: hidden;
}
.carousel-item.active {
    position: relative;
    opacity: 1;        
    transition: opacity 1.5s ease-in-out, visibility 1s;
    visibility: visible;
    
}

【讨论】：

如果您有新问题，请点击按钮提出问题。如果有助于提供上下文，请包含指向此问题的链接。
谢谢 - 当我在两个地方都将 easy-in-out 更改为 ease-in-out 时，这有效。

【解决方案2】：

根据@Jesus 的回答，我想出了一个适合我的版本：

.carousel-item {
    display: block !important;
    position: absolute;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
    transition-delay: 0.25s;
}

.carousel-item.carousel-item-left,
.carousel-item.carousel-item-right {
    position: relative;
    opacity: 1;
}

.carousel-item.active {
    z-index: 1;
    opacity: 1; 
    transition-delay: 0s;       
}

.carousel-item.active.carousel-item-left,
.carousel-item.active.carousel-item-right {
    opacity: 0;
    transform: unset;
}

这确保了进来的幻灯片淡入动画在淡出的幻灯片之后立即开始。它还解决了transform: unset 弹出幻灯片立即消失的问题。

【讨论】：