can i animate to change to innerHTML?

I want to apply animation to DOM created with innerHTML.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>animation</title>
</head>
<body>
  <div id="app">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</body>
</html>

CSS

#app {
  background: tomato;
  width: 100px;
  transition: all 2s ease;
}
#app.sizeUp {
  width: 200px;
}

#app>div{
  width:20px;
  margin-top: 5px;
  background:tan;
  transition: all 1s ease;
}

#app>div.sizeUp {
  width:150px;
  background: orange;
}

const $app = document.getElementById('app')
let on = false
$app.addEventListener('click', ()=>{
  on = !on
  $app.classList.toggle('sizeUp')
  if(!on){
      $app.innerHTML = `
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  `} else {
    $app.innerHTML = `
    <div class="sizeUp">1+</div>
    <div class="sizeUp">2+</div>
    <div class="sizeUp">3+</div>
    <div class="sizeUp">4+</div>
    <div class="sizeUp">5+</div>
  `
  }
})

The $app animation works fine. However, the child element does not work. Because those elements are 'newly created DOM'.

I know that the old child element and the new child element are different DOMs. Is it impossible to animate in this situation?

I thought of giving animation effect first and then changing innerHTML or giving effect after change.

This is a trick, and I wonder if there is a better way.

thank you.

this is test code.

https://codepen.io/dmgpgdmgpg/pen/eYBeeVg

Solution

There is no need to use innerHTML i just wrapped the + sign in span tag and toggled the opacity i saw your codepen and tried to imitate what you may try to achieve.

var ul=document.getElementsByTagName('ul')[0]; 
    var li=document.getElementsByTagName('li');
    var span=document.getElementsByTagName('span');
    ul.style.width="200px";
    
    ul.onclick=function(){
         if(ul.style.width=="200px"){
            ul.style.width="450px";
            for(var i=0;i<span.length;i++){
            span[i].style.opacity="1";
            li[i].style.width="300px";
         }
         }
         else{
            ul.style.width="200px";
            for(var i=0;i<span.length;i++){
            span[i].style.opacity="0";
            li[i].style.width="10px";
         }
         }
    }

*{
            margin: 0px;
            padding: 0px;
        }
        body{
            display: flex;
            justify-content: center;
            height: 100vh;
            align-items: center;
        }
        
        ul{
            list-style: none;
            background:red;
            transition: 0.4s;
            width: 200px;
            transition-delay: 0.4s;
            padding: 0px 20px 0px 0px;
        }   
        li{
            font-size: 20px;
            background-color: yellow;
            padding: 10px;
            width: 10px;
            transition: 0.4s;
            margin:0 0 10px 0;
        }
        li:last-child{
            margin:0px;
        }
        li span{
         opacity: 0;
         transition: 0.4s;
        }

<ul>
    <li>1<span>+</span></li>
    <li>2<span>+</span></li>
    <li>3<span>+</span></li>
    <li>4<span>+</span></li>
    <li>5<span>+</span></li>
</ul>