在CSS和JS中切换类时做一个过渡

Question

我想制作一个带有文本的图像的幻灯片，我想用下一个和上一个按钮更改显示的图像。我希望图像在它们之间切换时有一个不透明度过渡，这是通过切换类完成的，我没有得到过渡的工作。幻灯片中的其他内容都已经工作了。谢谢大家的回答^^

下面是我的代码:

<section class="featured container section">
<div class="featured__slides">
<div class="featured__active featured__item">
<img class="featured__img" src="/featured/f1.jpg">
</div>
<div class="featured__unactive featured__item">
<img class="featured__img" src="/featured/f2.jpg">
</div>
</div>

<div class="featured__arrows">
<button class="featured__arrow featured__prev">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z" clip-rule="evenodd" />
</svg>          
</button>
<button class="featured__arrow featured__next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z" clip-rule="evenodd" />
</svg>                    
</button>
</div>
</section>

<style>
.featured {
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;

position: relative;
}

.featured__item {
display: none;
-webkit-transition: all .3s linear 0s;
transition: all .3s linear 0s;
opacity: 0;
}

.featured__active {
display: block;
opacity: 1;
}

.featured__arrows {
display: flex;
justify-content: space-between;
position: absolute;
left: 0;
right: 0;
margin-left: 0.5rem;
margin-right: 0.5rem;
}

.featured__arrow {
height: var(--size-lg);
width: var(--size-lg);
color: var(--clr-cyan400);
}
</style>

<script>
const nextArrow = document.getElementsByClassName("featured__next");
const prevArrow = document.getElementsByClassName("featured__prev");

var idx = 0;
var slides = document.getElementsByClassName("featured__slides");
var slideshowElements = $(slides).children();

$(nextArrow).click(function () { 
slideshowElements[idx].classList.toggle("featured__active");
slideshowElements[idx].classList.toggle("featured__unactive");
if (slideshowElements.length - 1 == idx)
{
idx = 0;
} 
else
{
idx++;
}
slideshowElements[idx].classList.toggle("featured__active");
slideshowElements[idx].classList.toggle("featured__unactive");
});

$(prevArrow).click(function () { 
slideshowElements[idx].classList.toggle("featured__active");
slideshowElements[idx].classList.toggle("featured__unactive");
if (idx == 0)
{
idx = slideshowElements.length - 1;
} 
else
{
idx--;
}
slideshowElements[idx].classList.toggle("featured__active");
slideshowElements[idx].classList.toggle("featured__unactive");
});
</script>

我也试过在"featured__img"类也不能工作。

Answer 1

看起来你的CSS中缺少了一个关键部分，在切换类时使不透明度过渡工作。让我们来更新你的CSS和JavaScript代码，以达到预期的效果。

首先，更新你的CSS类，包括透明度属性:

.featured__item {
-webkit-transition: all .3s linear 0s;
transition: all .3s linear 0s;
opacity: 0; /* Add this line */
}
.featured__item.active {
opacity: 1; /* Add this line */
}

现在，您的JavaScript代码看起来很好，但是您可以通过创建一个函数来处理更新幻灯片的逻辑来简化它。以下是JavaScript代码的更新版本:

const nextArrow = $(".featured__next");
const prevArrow = $(".featured__prev");
let idx = 0;
const slides = $(".featured__slides");
const slideshowElements = slides.children();
function updateSlideshow(newIndex) {
slideshowElements.eq(idx).toggleClass("featured__active");
slideshowElements.eq(newIndex).toggleClass("featured__active");
idx = newIndex;
}
nextArrow.click(function () {
const newIndex = (idx + 1) % slideshowElements.length;
updateSlideshow(newIndex);
});
prevArrow.click(function () {
const newIndex = (idx - 1 + slideshowElements.length) % slideshowElements.length;
updateSlideshow(newIndex);
});
// Initialize the first item as active
slideshowElements.eq(idx).toggleClass("featured__active");

codesandbox。Io/s/little-morning-git4i7这里是一个使用稍微不同的方法的工作示例