Статьи

Краткий совет AtoZ CSS: видимость элемента управления с непрозрачностью

Эта статья является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .
Вы можете просмотреть полную расшифровку стенограммы и скринкаст здесь .

Добро пожаловать в нашу серию AtoZ CSS! В этой серии я буду изучать различные значения CSS (и свойства), каждое из которых начинается с другой буквы алфавита. Мы знаем, что иногда скринкастов недостаточно, поэтому в этой статье мы добавили новый быстрый совет о opacity для вас.

O2B-01

O для opacity

Мы можем использовать opacity чтобы контролировать видимость элементов на странице – от абсолютно прозрачного до полностью непрозрачного, как обсуждалось в оригинальном видео-скриншоте .

Вот несколько советов по использованию opacity чтобы гарантировать, что нужные части элемента являются полупрозрачными, и чтобы продемонстрировать, как мы можем создавать эффекты затухания, не полагаясь на библиотеки эффектов JavaScript.

Совет 1: opacity применяется ко всему элементу

При установке opacity для элемента весь элемент, включая его дочерние элементы, становятся полупрозрачными. opacity не наследуется детьми, поэтому, к сожалению, вы не можете установить opacity: 1 чтобы они снова стали полностью непрозрачными.

Если вы хотите, чтобы background элемента был полупрозрачным, но хотите, чтобы дочерние элементы (например, текст или изображения) были непрозрачными, используйте полупрозрачный background вместо opacity .

 .module { background: rgba(255,255,255,0.5); /* semi-trans white */ } 

Совет 2: opacity влияет на контекст стека

При установке для opactiy значения меньше 1 элемент размещается на новом слое, поэтому background может отображаться под полупрозрачным элементом. Это похоже на то, как работает z-index и, подобно z-index , использование opacity создает новый контекст стека.

Совет 3: Создание эффектов затухания без jQuery

Я предвосхищу это замечанием: мне нравится jQuery, и я его очень часто использую – практически в каждом проекте, над которым я работаю. То, о чем я говорю здесь, это не отказ от jQuery (хотя в этом случае он вам на самом деле не нужен ), а использование нативной функциональности CSS вместо использования JS для эффектов.

Мы можем создавать эффекты постепенного появления и исчезновения довольно просто, комбинируя opacity , transition и, возможно, некоторые переключения классов JS.

Чтобы очертить сценарий, представьте ситуацию, когда нажатие кнопки исчезает в модальном окне, чтобы отобразить некоторый дополнительный контент. Этот модальный контент может быть скрыт, когда страница загружается, а затем отображается с использованием метода fadeIn() jQuery.

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

Это будет использовать JavaScript для анимации элемента из display:none to display:block путем внедрения встроенных стилей.

Я стараюсь избегать ненужного внедрения встроенных стилей, и мы можем фактически выполнить тот же эффект, настроив классы «state» в нашем CSS – один для видимого состояния и один для невидимого состояния – примените переход к элементу, который мы хотим исчезнуть а затем переключать различные состояния с помощью простого переключения классов. Вы можете использовать псевдо-состояние CSS, например :hover или :focus если хотите сохранить эффект чисто CSS.

Сначала мы устанавливаем состояния в CSS. Я использую префикс соглашения именования is- чтобы продемонстрировать, что класс является состоянием, вызванным JS.

 .modal { /* other styles for 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) { // turn off the is-hidden class and turn on the is-visible class $('.modal').toggleClass('is-hidden is-visible'); }); 

Итак, у вас есть 3 быстрых совета о свойстве opacity .

Единственное, что я бы посоветовал вам использовать чаще всего, это использовать CSS для ваших эффектов по сравнению с использованием JavaScript. Я обнаружил, что у меня намного больше контроля над анимацией и переходами, и вы можете получить довольно симпатичные эффекты без огромных линий обратных вызовов анимации jQuery.