单击动态创建的 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 {&nbsp; &nbsp; color: white;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; transition: width 3s, height 3s;}

Answer 2

尝试添加属性背景颜色。不确定这是否可以解决问题。.zoom-in {&nbsp; &nbsp; background-color: #000;&nbsp; &nbsp; color: white;&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 100vw;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; transition: width 3s, height 3s;}