香草js淡出而不是淡入

Question

当我链接Bootstrap 5时，它只是淡出文本而不是淡出。当我删除链接时，一切都很好。

const animatedText = document.querySelector(".fancy");
const strText = animatedText.textContent;
const splitText = strText.split("");
animatedText.textContent = "";
for (let i = 0; i < splitText.length; i++) {
animatedText.innerHTML += "<animated>" + splitText[i] + "</animated>";
}
let char = 0;
let timer = setInterval(onTick, 50);
function onTick() {
const animated = animatedText.querySelectorAll('animated')[char];
animated.classList.add('fade');
char++
if (char === splitText.length) {
complete();
return;
}
}
function complete() {
clearInterval(timer);
timer = null;
}

animated {
opacity: 0;
transition: all 0.4s ease;
}
animated.fade {
opacity: 1;
}

<h2 class="fancy">WELCOME TO MY WORLD</h2>

Answer 1

Bootstrap在CSS中有一个。fade类，它负责"淡出";警告框。

改变你的"类到"text-fade"或者做点别的，一切都会好起来的。