我试图通过 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;
}
最佳答案
尝试动画
.fade {
animation: fadeIn ease .8s;
opacity: 1;
}
@keyframes fadeIn {
0% { opacity: 0}
100% { opacity: 1}
}
关于javascript - 使用 JavaScript 的 CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47543303/