Прозорість та анімація з нею в CSS

3 хв. читання

0 для непрозорості

Ми можемо використовувати непрозорість, щоб контролювати видимість елементів на сторінці - від повністю видимого до повністю прозорого елемента.

Ось кілька порад при використанні opacity , щоб правильно зазначати видимість елемента і як створити анімацію затухання без використання JavaScript.


Застосування opacity до елемента

Коли Ви використовуєте властивість opacity Ви встановлюєте непрозорість для всього елемента, в тому числі і для його дочірніх елементів.

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

Ось невеличкий код-приклад:

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

Оpacity ефект накладання

Коли значення прозорості менше 1, елемент розміщується на новому прошарку і background може знаходитися під напівпрозорим елементом. Це аналогічно тому, як працює z-index, і як він створює новий контекст стека використовуючи прозорість.


Створення ефекту появи без JavaScript (JQuery)

Я хотів би почати з невеличкого застереження: я люблю JQuery і часто користуюсь ним - практично в кожному проекті. Те, що я говорю тут, не свідчить про те що я відмовляюсь від нього (хоча насправді він не потрібен в даному випадку).

Ми можемо створити ефект появи, комбінуючи opacity, transition і деякі можливості JavaScript, а саме перемикання класів.

Для того щоб зрозуміти цю картину, уявіть собі ситуацію, де клацнувши кнопку модальне вікно блякне, виявляючи нам деякий контент. Цей контент повен бути схований при завантаженні сторінки і потім відображений за допомогою JQuery fadeIn() методу.

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

Ми можемо використати JavaScript для того щоб display: none став display: block за допомогою інлайнових стилів.

Я намагаюсь не використовувати інлайнові стилі, замість цього, ми можемо досягти того ж ефекту за допомогою створення класів "станів" - один для видимого і один для невидимого станів. Далі я застосовую перехід до елементу, який ми хочемо сховати, а потім вже перемикаю різні стани, використовуюючи просте перемикання класів. Ви можете використовувати псевдо-класи CSS як: :hover або :focus, якщо ви хочете виконати анімацію тільки на CSS.

Спочатку ми створимо класи "станів" в CSS. Я використовую іменовані префікси is-, щоб показати, що клас є станом.

.modal {
  /* other styles for modal */
  transition: opacity 1s ease;
}
.modal.is-visible {
  opacity: 1;
}
.modal.is-hidden {
  opacity: 0;
}

Тепер ми можемо перемикати стани за допомогою динамічного додавання або видалення класів в JavaScript (за умови, що ви починаєте з класу is-hidden в HTML):

$('.show-modal-button').on('click',function(e) {
  // turn off the is-hidden class and turn on the is-visible class
  $('.modal').toggleClass('is-hidden is-visible');
});

Ну на цьому ми й закінчимо, ось так швиденько ми оглянули 3 підказки про властивість opacity.

Якщо у вас є можливість створити анімацію за допомогою CSS без використання JavaScript - просто зробіть це! Таким чином ви досягнете більшого контролю і зможете зробити досить химерні ефекти.

Дякую за увагу!

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація