Нещодавно, працюючи над створенням індикатора прогресу, я зрозумів, що мій підхід міг бути значно простішим. Спочатку я використовував useRef в React для відслідковування позиції індикатора, припускаючи, що потрібно вручну оновлювати значення. Однак CSS-переходи елегантно впоралися з усім процесом без додаткового навантаження на JavaScript.
Ось що я зрозумів і як ви можете застосувати ці техніки у своїх проектах.
CSS перехід (CSS transition) — це спосіб змінювати CSS властивості протягом певного часу. Це чудово підходить для анімації поступових змін, таких як переміщення індикатора прогресу з однієї позиції в іншу.
Як працюють CSS-переходи
Переходи працюють на принципі плавної інтерполяції між початковим і кінцевим станом для заданої властивості. Щоб увімкнути перехід, достатньо вказати:
- Властивість, яку анімуємо.
- Тривалість анімації.
- Функцію часу (опційно), щоб контролювати плавність переходу.
Приклад: Індикатор прогресу
Ось мінімальний приклад індикатора прогресу, що використовує тільки CSS-переходи:
.progress-bar {
width: 0;
height: 3rem;
background: #4caf50;
transition: width 1s ease-in-out;
}
Кожного разу, коли властивість width елемента .progress-bar змінюється, перехід забезпечує плавне оновлення за 1 секунду. Не потрібно вручну відстежувати попередній стан, оскільки браузер автоматично обчислює інтерполяцію.
Як я ускладнив це: Використання useRef
У моїй початковій реалізації я використовував useRef, щоб зберігати попередній стан індикатора прогресу в React:
const progressBarRef = useRef();
const updateProgress = (newWidth) => {
const progressBar = progressBarRef.current;
progressBar.style.width = `${newWidth}%`;
};
Хоча це працювало, це було непотрібно. CSS-переходи вже автоматично відстежують і анімують зміни CSS властивостей. Видаливши useRef і просто оновлюючи width динамічно, перехід працював бездоганно.
Перекладено з: How I Simplified My Progress Bar with CSS Transitions