Javascript 在点击动态创建的td后，如何在js中创建一个div来填充屏幕？

我正在创建一个jeopardy风格的游戏，如果你点击一个动态创建的td，其中包含一个问题的美元金额，这个问题（已经从jeopardy API获得）将作为一个innerText放置在一个动态创建的div元素中。在点击td之后，我想让div动画化并填充整个屏幕

这是一个小片段

handleClick(e) {
        let targetID = e.target.id;
        if (this.lockboard) return;
        for (let x = 0; x < this.width; x++) {
            for (let y = 0; y < this.height - 1; y++) {
                if (targetID.includes(`${y}-${x}`) && targetID) {
                    this.lockboard = true;
                    let newDiv = document.createElement('DIV');
                    let clickedTD = document.getElementById(`${y}-${x}`);

                    console.log(clickedTD);
                    newDiv.innerText = this.clues[x][y].question;

                    newDiv.classList.add('zoom-in');
                    console.log(this.clues[x][y].question);
                    console.log(this.clues[x][y].answer);
                }
                this.lockboard = false;
            }
        }
    }

---

TDLR：我想我只是不知道如何在单击TD后设置div动画，使其放大并填充整个屏幕。类

放大可以将其目标元素扩展到全屏和高度

.zoom-in {
    color: white;
    position: absolute;
    width: 100vw;
    height: 100vh;
    transition: width 3s, height 3s;
}

类
放大
可以将其目标元素扩展到全屏和高度

.zoom-in {
    color: white;
    position: absolute;
    width: 100vw;
    height: 100vh;
    transition: width 3s, height 3s;
}

尝试添加属性背景色。不确定这是否能解决问题

.zoom-in {
    background-color: #000;
    color: white;
    position: absolute;
    width: 100vw;
    height: 100vh;
    transition: width 3s, height 3s;
}

尝试添加属性背景色。不确定这是否能解决问题

.zoom-in {
    background-color: #000;
    color: white;
    position: absolute;
    width: 100vw;
    height: 100vh;
    transition: width 3s, height 3s;
}