JavaScript动态创建图片时Transition过渡效果不生效求助

点击角色时，需将对应图片添加到Animated-Pokemon span并应用过渡效果，但Transition未生效。当前将Animated-Pokemon的opacity设为1（设为0时无过渡且不显示），仅从其他程序切换到Chrome时能看到过渡，点击角色时完全无效果。此前单图场景下功能正常。

相关代码 #

HTML #

<div class="Pokemon-Area">
    <span id="poke1" class="Animated-Pokemon">
    </span>
    <img src="../Pokemon-Images/game.png" alt="logo" width="40%" id="logo-Img1">
</div>

CSS #

.Animated-Pokemon{
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
   left: -30;
   opacity: 1;
  transform: scale(0.3);
  transition: opacity 0.3s, transform 0.5s;
}
.Animated-Pokemon.show{
    opacity: 1;
    transform: scale(1);
    
}
.Animated-Pokemon img{
width: 14vw;
}

JavaScript #

function handlePokemonClick(pokemonName) {
  const imageName = pokemonName.replace(' ', '_'); 
  const imagePath = `../Animated-Img/${imageName}.gif`;

  const animatedPokemon = document.createElement('img');
  animatedPokemon.src = imagePath;
  animatedPokemon.alt = pokemonName;
animatedPokemon.classList.add('show');


  for (let i = 1; i <= 6; i++) {
    const slot = document.getElementById(`poke${i}`);
    if (slot.children.length === 0) {
      slot.innerHTML = '';
      slot.appendChild(animatedPokemon);
      slot.style.display = 'block';
      break; 
    }
  }
}

问题排查与修复方案 #

1. 过渡触发对象错误 #

你把show类加在了新创建的img元素上，但CSS中过渡效果是绑定在.Animated-Pokemon这个span容器上的，应该给span容器添加show类，而非图片。

2. 初始状态与目标状态无差异 #

.Animated-Pokemon默认opacity为1，.Animated-Pokemon.show的opacity也为1，属性无变化自然不会触发过渡。需将默认opacity设为0，通过添加show类切换为1。

3. DOM渲染时机问题 #

直接添加元素后立即修改类，浏览器可能合并渲染步骤，导致过渡不触发。用requestAnimationFrame延迟类的添加，让浏览器先渲染初始状态，再触发过渡。

修改后的代码 #

CSS #

.Animated-Pokemon{
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: -30px; /* 补充缺失的单位 */
    opacity: 0; /* 默认设为透明 */
    transform: scale(0.3);
    transition: opacity 0.3s, transform 0.5s;
    visibility: visible; /* 确保元素存在，仅透明不可见 */
}
.Animated-Pokemon.show{
    opacity: 1;
    transform: scale(1);
}
.Animated-Pokemon img{
    width: 14vw;
}

JavaScript #

function handlePokemonClick(pokemonName) {
  const imageName = pokemonName.replace(' ', '_'); 
  const imagePath = `../Animated-Img/${imageName}.gif`;

  const animatedPokemon = document.createElement('img');
  animatedPokemon.src = imagePath;
  animatedPokemon.alt = pokemonName;

  for (let i = 1; i <= 6; i++) {
    const slot = document.getElementById(`poke${i}`);
    if (slot.children.length === 0) {
      slot.innerHTML = '';
      slot.appendChild(animatedPokemon);
      // 延迟添加类，确保初始状态已渲染
      requestAnimationFrame(() => {
        slot.classList.add('show');
      });
      break; 
    }
  }
}

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