使用 javascript 的 CSS 过渡

Question

我正在尝试通过 javascript 添加类名（“fade”）并将不透明度设置为 1 来使文本淡入。添加淡入淡出类后，不透明度确实更改为 1，但没有过渡效应。我读过类似的问题，答案说你需要延迟，但我不明白如何做到这一点。任何帮助，将不胜感激。

function showSlides(n) {
    let text = document.getElementsByClassName("text");
    console.log(text);
    slideIndex += n;
    console.log(slideIndex);
    let slides = document.getElementsByClassName("mySlides");
    if (slideIndex < 0) {
        slideIndex = slides.length - 1;
    }
    if (slideIndex > slides.length -1) {
        slideIndex = 0;
    }
    for (i=0; i < slides.length; i++) {
        slides[i].style.display = "none";
        text[i].classList.remove("fade");
    }

    slides[slideIndex].style.display = "block";
    text[slideIndex].className += " fade"; (text should ease in. Opacity from 0 to 1)
}

css

.text {
    position: absolute;
    top: 30%;
    right: 10%;
    text-align: right;
    color: white;
    opacity: 0;
    transition: opacity 5s ease;
}

.fade {
    opacity: 1;
}

Answer 1

尝试动画

.fade {
animation: fadeIn ease .8s;
opacity: 1;
}

@keyframes fadeIn {
0%   { opacity: 0}
100% { opacity: 1}
}