JS 动画循环过渡答案

【问题标题】：JS animation Loop TransitionsJS 动画循环过渡
【发布时间】：2021-12-03 05:56:19
【问题描述】：

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

【问题讨论】：

标签： javascript loops setinterval transition

【解决方案1】：

CSS 和 HTML 之间有一点不同：HTML 有一个名为“display-heading”的 id 属性，而 CSS 定义了一个 class的属性> 用那个名字。

你可以通过改变不透明度来实现淡化。

这是一个可运行的sn-p：

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;
}

&lt;h1 id='display-heading'&gt;Welcome&lt;/h1&gt;

【讨论】：