CSS від А до Я: як змінювати видимість елемента за допомогою властивості opacity

26

Від автора: вітаю вас в нашій серії уроків CSS від А до Я! В цій серії я розповім вам про CSS значення і властивості, які починаються з різних букв алфавіту. Іноді навчального ролика буває недостатньо, і в цій статті я дам вам кілька швидких рад по роботі з властивістю opacity.

O значить opacity

За допомогою властивості opacity можна змінювати видимість елементів на сторінці: від повної прозорості до повної непрозорості, як ми розповідали в відео.

Порада 1: властивість opacity застосовується до всього елементу

При застосуванні властивості opacity до елемента, воно застосовується до всього об’єкта та його дочірніх елементів, роблячи їх напівпрозорими. Opacity не успадковуються дочірніми елементами, тобто не можна застосувати до них opacity: 1, щоб вони стали видимими.

Якщо необхідно задати напівпрозорий фон, а дочірні елементи були нормальними (текст, зображення), використовуйте напівпрозорий фон background, а не непрозорість.

.module {
background: rgba(255,255,255,0.5); /* напівпрозорий білий */
}

Порада 2: opacity працює за типом стека

Якщо задати opacity менше 1, елемент міститься на новий шар, і можна показувати фон background під напівпрозорим елементом. Принцип роботи схожий з властивістю z-index. Як і властивість z-index, opacity створює новий контекст стека.

Порада 3: можна створювати ефект плавного появи і затухання без JQuery

Відразу обмовлюся: мені подобається JQuery, я часто ним користуюся, майже в кожному проекті. Тут я буду говорити не про повну відмову від JQuery, а про те, що можна обійтися функціоналом CSS і не вчити JS тільки із-за ефектів.

Можна з легкістю створювати ефекти плавного появи і затухання за допомогою властивостей opacity і transition, і, можливо, трохи JS для зміни класів.

Уявімо ситуацію: по кліку на кнопку плавно з’являється модальне вікно з якимось додатковим контентом. Після повного завантаження сторінки це модальне вікно повинно бути приховано, а викликати його повинен JQuery метод fadeIn().

$(‘.show-modal-button’).on(‘click’,function(e) {
e.preventDefault();
$(‘.modal’).fadeIn();
});

Цей метод буде використовувати JS для анімації елемента від display: none до display: block, вставляючи инлайновые стилі.
Я, як правило, уникаю необов’язкових инлайновых стилів, і такий же ефект можна зробити за допомогою класів станів в CSS. Один клас для видимого стану і один для прихованого. За допомогою властивості transition і простої зміни класів ми можемо перемикатися між станами і створювати плавну анімацію. Для створення ефекту на чистому CSS можна використовувати псевдокласи :hover або :focus.

Спочатку необхідно прописати стану в CSS. В іменах класів я використовую префікс is-, щоб показати, що стану перемикаються через JS.

.modal {
/* інші стилі модального вікна */
transition: opacity 1s ease;
}
.modal.is-visible {
opacity: 1;
}
.modal.is-hidden {
opacity: 0;
}

Динамічно додаючи або видаляючи класи в JS, ми тепер можемо перемикатися між станами. За замовчуванням має стояти клас is-hidden в HTML.

$(‘.show-modal-button’).on(‘click’,function(e) {
// прибираємо клас is-hidden і додаємо клас is-visible
$(‘.modal’).toggleClass(‘is-is hidden-visible’);
});

Ось і все, 3 простих ради по властивості opacity. Я закликаю вас використовувати CSS по максимуму замість JS для створення ефектів. Я зрозумів, що набагато краще контролюю анімацію і плавні переходи в CSS. З JQuery можна поцупити пару прикольних ефектів, але без купи рядків колбек функцій.