Question

在Ng bootstrap carousel组件中，如何在图像/幻灯片之间进行淡入/淡出过渡？

Answer 1

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

您必须定义.carousel-item和.carousel-item.active css类，如下所示：

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

Answer 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 后出现的幻灯片立即消失的问题。

ngb-carousel如何在图像/幻灯片之间设置淡入/淡出动画？

2 个答案: