Как получить div, созданный в js, чтобы заполнить экран после нажатия на динамически созданный тд?

Question

Я создаю игру в стиле «под угрозой», в которой, если вы нажмете на динамически созданный тд, содержащий сумму в долларах, относящуюся к вопросу, вопрос (уже полученный из Jeopardy API) будет помещен как innerText внутри динамически создаваемого элемента div. После нажатия на тд я хочу, чтобы 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 в методе экземпляра.

Класс .zoom-в CSS имеет следующий код:

.zoom-in {
    color: white;
    position: absolute;
    transform: scale(1) translate(100%, 100%);
    transition: transform 3s;
}

TDLR: я думаю, я просто не знаю, как анимировать div, чтобы взорвать и заполнить весь экран после нажатия на TD

Answer 1

Попробуйте добавить свойство background-color. Не уверен, что это может решить проблему.

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

Answer 2

Класс zoom-in может развернуть целевой элемент на весь экран и высоту.

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