Javascript 元素达到最终状态而不显示过渡/动画

我正在使用javascript在

td

元素中创建

div

元素（

div

是

td

元素的子元素）

newDiv = document.createElement("div");
newDiv.className = "class";        
tdEle.appendChild(newDiv);

我还为这个新创建的div分配了一个类。这将

div

元素定位在

td

元素的左上角

.class{
    position: absolute;
    height: 2%;
    width: 2%;
    background-color: azure;
    left: 0;
    top: 0;
    transition-duration: 350ms;
}

我正在尝试进行转换，以便

newDiv

元素使用JS覆盖整个

td

元素。为此，我正在做类似的事情

我的CSS中有这个

.class.scale {
    width: 100%;
    height: 100%;
}

为了自动触发这个动画，我在JS中使用了这个

newDiv.classList.add('scale'); 

当我运行代码时，

newDiv

确实覆盖了整个

td

，但是没有显示过渡动画。我做错了什么？我可以使用JS实现这种效果的任何其他方法

编辑： 提供的解决方案非常有效，但我在原始问题中隐藏了一些细节。正因为如此，我没有得到设计好的结果

详情： 我没有1个

元素，只有

n个

元素。我想在每个

内动态创建一个

div

，用于上述相同的转换

tds.forEach(tdEle => {
                    let id = getID(tdEle); // some logic to get the ID for <td> element
                    console.log(id);
                    let tdEle = document.getElementById(id); // get the actual td element
                    // append a div at top left corner
                    newDiv = document.createElement("div");
                    newDiv.className = "class";
                    tdEle.appendChild(newDiv);
                    setTimeout(function() { // <---------------------------------
                        newDiv.classList.add('scale');
                    });
                });

tds.forEach（tdEle=>{
let id=getID（tdEle）；//获取元素id的一些逻辑
console.log（id）；
让tdEle=document.getElementById（id）；//获取实际的td元素
//在左上角追加一个div
newDiv=document.createElement（“div”）；
newDiv.className=“class”；
tdEle.appendChild（newDiv）；
setTimeout（function（）{/首先，您需要在CSS中设置要设置动画的属性：

transition-property: width, height;

然后，根据是否立即添加类，您可能需要等待DOM更新后再添加类，否则将看不到动画：

setTimeout(function() {
  newDiv.classList.add('scale');
});

演示

newDiv=document.createElement（“div”）；
newDiv.className=“class”；
文件.body.appendChild（newDiv）；
setTimeout（function（）{//hey，根据我提供的详细信息，此解决方案非常有效。但我没有提供问题的所有详细信息。当我使用此解决方案时，它对我的原始问题不起作用（显然是因为没有提供确切的详细信息）。我已经提供了更多的细节。也许你可以帮我。谢谢。@rayan什么是
n_div
？@rayan你忘了在本地声明
newDiv
，所以它是全局的。在它前面添加
const
或
let
：谢谢。最后一个问题。所有的转换都是同时发生的。可以运行这些吗e一个接一个地转换？即一个先完成，然后下一个开始。无需这样做，只需给我一些有关如何进行转换的指示。谢谢，您只需在设置超时上添加一个延迟：（它们将按照
forEach
的顺序发生，不知道这是否是您想要的？）