JS动画循环过渡

Question

var i = 1; 
const title = document.getElementById("display-heading");
var texts = [
"Karibu",
"Bienvenido",
"স্বাগতম।",
"Willkommen",
"أهلا بك",
"Bienvenue"
];
title.textContent = texts[0];
var loop = setInterval(function() {
title.textContent = texts[i];
i = (i+1) % texts.length; // Allows the array to loop
}, 1000);

我如何添加渐变/减慢过渡?

https://codepen.io/elliebrayton/pen/vYJBOBP

Answer 1

CSS和HTML之间有一点差异:HTML有一个名为"display-heading"的id属性，而CSS为类定义了带有该名称的属性。

你可以通过改变不透明度来实现渐暗。

下面是一个可运行代码片段:

const title = document.getElementById("display-heading");
var texts = [
"Karibu",
"Bienvenido",
"স্বাগতম।",
"Willkommen",
"أهلا بك",
"Bienvenue"
];
title.addEventListener("transitionend", loop);
function loop() {
if (title.style.opacity != "1") {
texts.push(title.textContent = texts.shift());
title.style.opacity = 1;
} else {
setTimeout(() => title.style.opacity = 0, 500);
}
}
setTimeout(loop);

#display-heading{
font-size: 30px;
transition: 0.5s opacity;
opacity: 0;
}

<h1 id='display-heading'>Welcome</h1>