我可以制作动画以更改为 innerHTML 吗？

Question

我想将动画应用于使用 innerHTML 创建的 DOM。

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

JS

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>
  `
  }
})

$app 动画效果很好。但是，子元素不起作用。因为那些元素是 'newly created DOM'.

我知道旧的子元素和新的子元素是不同的DOM。这种情况是不是不能做动画了？

想到先给动画效果再改内HTML或者改后给效果

这是一个技巧，不知道有没有更好的方法

谢谢。

这是测试代码。

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

Answer 1

不需要使用 innerHTML 我只是将 + 号包裹在 span 标签中并切换不透明度我看到了你的 codepen 并试图模仿你可能尝试实现的目标。

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>

我可以制作动画以更改为 innerHTML 吗？

can i animate to change to innerHTML?

css

animation

transition

innerhtml