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

Question

我正在创建一个 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;            }        }    }handleClick 是在实例方法中动态创建的 td 上传递给事件监听器的回调。CSS 中的 .zoom-in 类具有以下代码：.zoom-in {    color: white;    position: absolute;    transform: scale(1) translate(100%, 100%);    transition: transform 3s;}TDLR：我想我只是不知道如何在点击 TD 后让 div 动画炸毁并填满整个屏幕

Answer 1

该类zoom-in可以将其目标元素扩展到全屏和高度。

.zoom-in {

    color: white;

    position: absolute;

    width: 100vw;

    height: 100vh;

    transition: width 3s, height 3s;

}

Answer 2

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

.zoom-in {

    background-color: #000;

    color: white;

    position: absolute;

    width: 100vw;

    height: 100vh;

    transition: width 3s, height 3s;

}