使用javascript进行CSS转换

Question

我试图通过javascript添加类名（“淡入淡出”）并将不透明度设置为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}
}