JS循环切换多语言欢迎语文本时如何添加淡入效果并放慢过渡速度

第一步：新增CSS过渡样式 #

给目标文本元素添加过渡相关的样式，控制淡入淡出的动画效果：

#display-heading {
  /* 你原有该元素的样式可以保留，新增以下属性即可 */
  opacity: 1;
  /* 此处0.6s为单次淡入/淡出动画的时长，需要放慢过渡速度可以调大该数值 */
  transition: opacity 0.6s ease;
}
#display-heading.fade-out {
  opacity: 0;
}

第二步：修改JS切换逻辑 #

调整原有定时器逻辑，先触发淡出动画，动画结束后再切换文本并触发淡入：

let i = 1; 
const title = document.getElementById("display-heading");
const texts = [
    "Karibu",
    "Bienvenido",
    "স্বাগতম।",
    "Willkommen",
    "أهلا بك",
    "Bienvenue"
];

title.textContent = texts[0];
// 该数值需要和CSS中设置的过渡时长保持一致，单位为毫秒，0.6s对应600
const transitionDuration = 600;

const loop = setInterval(function() {
    // 触发淡出动画
    title.classList.add('fade-out');
    // 等待淡出完成后切换文本，再触发淡入
    setTimeout(() => {
        title.textContent = texts[i];
        title.classList.remove('fade-out');
        i = (i+1) % texts.length;
    }, transitionDuration);
// 此处2500为两次文本切换的间隔时长，单位为毫秒，调大数值可放慢整体切换频率
}, 2500);

参数调整说明 #

• 调整过渡动画速度：修改CSS中transition属性的时间值，同时同步修改JS中transitionDuration的数值即可
• 调整整体切换频率：修改setInterval末尾的间隔数值，数值越大两次切换的间隔越久

内容的提问来源于stack exchange，提问作者Ellie