时间戳

首页 > 解决方案 > JS 动画循环过渡

javascript - JS 动画循环过渡

问题描述

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

标签： javascriptloopssetintervaltransition

解决方案

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>

推荐阅读