Javascript – transition is not adding up in img created by JavaScript

Problem:

When i am clicking on a character it should be added in ‘Animated-Pokemon’ span but with transition but the transition is not being applied

this is my HTML where the image should be created

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

and this is my CSS code

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

and Js code

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

when the image is created it should add show class applying transition to the image (I have put the opacity in Animated-Pokemon to 1 because with 0 its not showing because theres no transition)
but when i move from one program to chrome i can see the transition but not when its clicked

I tried everything but nothings working it was working when the img was singular Help me out please

Solution:

It looks like you add the show class when you create it. This way there is nothing to transition from. Either you need to add the element before, and adding the Show class later when you want to apply the transition, or you need to add a keyframes animation like this:

.Animated-Pokemon{
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1
  }
}

Here is a working example: JSFiddle

Hope this helps. Cheers