Слайд: чому плитка їде, а не стрибає

Один маленький рядок CSS перетворює миттєвий стрибок на плавний рух. Це — фундамент усього руху плиток у твоїй грі 2048. Опануєш його — і половина магії вже твоя.

Дві складові плавного руху

Щоб щось анімувалося, потрібні дві речі — і це майже все, що тут є:

1. Зміна — ти змінюєш значення властивості (наприклад, посунув елемент праворуч).
2. Transition — ти заздалегідь сказав браузеру: «коли ця властивість зміниться — не стрибай, а пройди шлях плавно за певний час».

Без пункту 2 зміна застосовується миттєво — стрибок. З ним — браузер сам «домальовує» всі проміжні кадри. Ти не пишеш кадри руками; ти лише оголошуєш правило.

Спробуй сам 👇

Спочатку познач галочку transition і посунь плитку. Потім зніми галочку й посунь ще раз. Відчуй різницю — це і є весь урок.

Як це виглядає в коді

Рівно те, що щойно відбулося в лабораторії, мовою CSS + JS:

/* CSS — правило оголошується ОДИН раз */
.tile {
  transform: translateX(0px);
  transition: transform 0.35s ease-in-out;   /* ← уся магія тут */
}

// JS — ти лише змінюєш значення; браузер сам анімує перехід
tile.style.transform = "translateX(150px)";  // плитка плавно поїде

Прибери рядок transition — і той самий tile.style.transform = … спрацює миттєво. Код руху не змінився; зникло лише правило про плавність.

А тепер — у твоїй грі 2048

Ти це вже бачив. У src/style.css кожна плитка має саме таке правило:

.tile {
  transition: transform var(--slide) ease-in-out;   /* --slide = 0.12s */
}

А у src/render.ts функція position() просто змінює transform на нові координати — і плитка їде сама:

function position(el, x, y) {
  el.style.transform =
    `translate(calc((var(--cell) + var(--gap)) * ${x}), …)`;
}

Чому transform, а не left/top? Бо transform не змушує браузер перераховувати розкладку сторінки (layout) — тому він дешевий і плавний. Це підтверджує і web.dev. (Детальніше розберемо в наступних уроках.)

Перевір себе

Не підглядай вгору — спробуй пригадати. Згадування з пам'яті закріплює міцніше, ніж перечитування.

🛠 Твоє завдання (5 хвилин)