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