为ID为Rangasala的元素添加淡入动画未生效，寻求解决方法

你想要让#Rangasala元素带着完整文本通过淡入动画显示，但目前结合Typed.js的打字效果后，动画没有正常生效。我来帮你分析问题根源，并给出针对性的解决办法：

问题根源分析 #

• 元素初始状态不匹配动画逻辑：你的fadeIn动画是从opacity: 0过渡到1，但初始时#Rangasala没有设置透明状态，而且Typed.js是逐个字符输出文本，当onComplete触发时，元素已经处于可见状态，导致动画的透明度变化无法被感知。
• 循环设置导致动画无法重复触发：你给Typed.js设置了loop: true，第一次完成打字后fadeIn类已经添加到元素上，而CSS动画默认只会执行一次，后续循环时不会重新触发动画。

针对性解决方案 #

根据你的实际需求，分三种场景给出适配的修改方案：

场景1：仅需完整文本淡入出现（无需打字效果） #

如果你只是想让元素带着完整文本淡入显示，不需要逐个字符的打字动画，可以简化代码：

1. 调整HTML，直接写入完整文本：

<section id="showcase">
  <div class="container">
    <div class="bg">
      <h1 id="Rangasala">Itahari Rangasala Karate Dojo</h1>
      <p>Welcome to the Website of the Itahari Rangasala Karate Dojo</p>
    </div>
  </div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>

2. 调整CSS，给元素添加初始隐藏样式：

body {
  font-family: sans-serif;
}

#Rangasala {
  opacity: 0;
  transform: translateY(-20px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeIn {
  animation: fadeIn 2s ease-in-out forwards;
}

3. 调整JS，在页面加载完成后触发动画：

// Background image slider部分代码保持不变
const showcase = document.getElementById("showcase");
const images = [
  "https://placehold.co/600x400/pink/lightgray/?text=Dojo2.jpg",
  "https://placehold.co/600x400/aliceblue/lightgray/?text=Dojo1.jpg",
  "https://placehold.co/600x400/lightyellow/lightgray/?text=Dojo3.jpg"
];
let index = 0;

function changeBackground() {
  showcase.style.backgroundImage = `url('${images[index]}')`;

  if (images[index].includes("Dojo3.jpg")) {
    showcase.style.clipPath = "inset(10% 0 0 0)";
    showcase.style.backgroundPosition = "center";
  } else {
    showcase.style.clipPath = "none";
    showcase.style.backgroundPosition = "center";
  }

  index = (index + 1) % images.length;
}

changeBackground();
setInterval(changeBackground, 3000);

// 页面加载完成后触发淡入动画
window.addEventListener('load', () => {
  const rangasalaElement = document.getElementById("Rangasala");
  rangasalaElement.classList.add("fadeIn");
});

// Blur effect部分代码保持不变
const bg = document.querySelector('.bg');
let load = 0;
let int = setInterval(blurring, 30);

function blurring() {
  load++;
  if (load > 99) {
    clearInterval(int);
  }
  bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
}

function scale(num, in_min, in_max, out_min, out_max) {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
}

场景2：先完成打字效果，再触发淡入动画（支持循环） #

如果你想保留Typed.js的打字+删除循环效果，同时每次完成打字后都触发淡入动画，需要修改Typed.js的钩子函数，确保每次循环都能重置状态并重新触发动画：

1. 先给#Rangasala添加初始隐藏样式（修改CSS）：

body {
  font-family: sans-serif;
}

#Rangasala {
  opacity: 0;
  transform: translateY(-20px);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeIn {
  animation: fadeIn 2s ease-in-out forwards;
}

2. 修改Typed.js的初始化代码，添加重置钩子：

// Background image slider部分代码保持不变
const showcase = document.getElementById("showcase");
const images = [
  "https://placehold.co/600x400/pink/lightgray/?text=Dojo2.jpg",
  "https://placehold.co/600x400/aliceblue/lightgray/?text=Dojo1.jpg",
  "https://placehold.co/600x400/lightyellow/lightgray/?text=Dojo3.jpg"
];
let index = 0;

function changeBackground() {
  showcase.style.backgroundImage = `url('${images[index]}')`;

  if (images[index].includes("Dojo3.jpg")) {
    showcase.style.clipPath = "inset(10% 0 0 0)";
    showcase.style.backgroundPosition = "center";
  } else {
    showcase.style.clipPath = "none";
    showcase.style.backgroundPosition = "center";
  }

  index = (index + 1) % images.length;
}

changeBackground();
setInterval(changeBackground, 3000);

// 修改后的Typed.js初始化
var typed = new Typed('#Rangasala', {
  strings: ['Itahari Rangasala Karate Dojo'],
  typeSpeed: 50,
  backSpeed: 25,
  loop: true,
  startDelay: 1000,
  backDelay: 1500,
  preStringTyped: () => {
    // 每次开始打字前，重置元素状态并移除动画类
    const rangasalaElement = document.getElementById("Rangasala");
    rangasalaElement.classList.remove("fadeIn");
    rangasalaElement.style.opacity = '0';
    rangasalaElement.style.transform = 'translateY(-20px)';
  },
  onComplete: () => {
    // 打字完成后添加动画类，触发淡入
    const rangasalaElement = document.getElementById("Rangasala");
    rangasalaElement.classList.add("fadeIn");
  }
});

// Blur effect部分代码保持不变
const bg = document.querySelector('.bg');
let load = 0;
let int = setInterval(blurring, 30);

function blurring() {
  load++;
  if (load > 99) {
    clearInterval(int);
  }
  bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
}

function scale(num, in_min, in_max, out_min, out_max) {
  return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
}

场景3：打字过程中同步淡入 #

如果你想让元素在打字的同时慢慢淡入，可以修改为在onBegin钩子中添加动画类：

var typed = new Typed('#Rangasala', {
  strings: ['Itahari Rangasala Karate Dojo'],
  typeSpeed: 50,
  backSpeed: 25,
  loop: true,
  startDelay: 1000,
  backDelay: 1500,
  preStringTyped: () => {
    const rangasalaElement = document.getElementById("Rangasala");
    rangasalaElement.classList.remove("fadeIn");
    rangasalaElement.style.opacity = '0';
    rangasalaElement.style.transform = 'translateY(-20px)';
  },
  onBegin: () => {
    // 开始打字时触发淡入动画
    const rangasalaElement = document.getElementById("Rangasala");
    rangasalaElement.classList.add("fadeIn");
  }
});

你可以根据自己的实际需求选择对应的方案，调整后动画就能正常生效了。

备注：内容来源于stack exchange，提问作者bibashmanjusubedi