Дивимося на прикладі
Я думаю, краще розглядати відразу на прикладі. Припустимо, у нас є два однакових блоку. В html розмітці я пропоную позначити їх так:
Кожен елемент отримав два стильових класу. Навіщо це потрібно? Першим класом ми поставимо загальні правила зовнішнього вигляду, блоки ж однакові, так що їх можна описати спільно. У реальному прикладі, швидше за все, буде по-іншому. Також кожен елемент отримав власний унікальний стильовий клас. Він теж стане в нагоді.
Цими правилами ми прописали обом блокам однаковий зовнішній вигляд: висоту, ширину, розмір шрифту, відступ і зелений фон. Остання властивість transition якраз і є відносно новим і входить в версію CSS3. Воно позначає затримку, після якої виконуються певні правила. По суті, саме це дає плавне поява.
У прикладі я прописав 1 секунду, за бажанням можна поставити більше або менше. Коли ви побачите властивість в дії, то самі зможете відрегулювати його значення.
Як реалізувати в css3 плавне поява?
Далі є два варіанти дій. Припустимо, нам потрібно поки приховати другий блок, а при наведенні на перший плавно виводити його. Найбільш часто для приховування елемента застосовують правило display: none. але воно не дасть саме того, чого потрібно - плавного появи. Елемент з'явитися різко.
Тому ми зробимо по-іншому. Дивіться цей код:
Ми використовували ще одне CSS3-властивість - opacity. Воно задає прозорість елемента, яка прописується від 0 (повністю прозорий) до 1 (повністю непрозорий) елемент.
Спочатку повністю прибираємо другий блок від очей, роблячи його прозорим. Тепер потрібно зробити так, щоб при наведенні мишки на перший блок плавно з'являвся другий. Для цього використовується такий ось цікавий комбінований селектор:
Тобто сама зміна стилів відбувається при наведенні на перший блок, а змінюється безпосередньо другий. Завдяки прописаному раніше transition він з'явиться не різко, а плавно, що нам з вами і потрібно. Змінюючи значення transition можна зробити поява більш різким або навпаки ще більше сповільнити його.
Ось з такою ось швидкістю з'являється блок при виставленому значенні transition: 1s. До речі, значення можна задавати і в мілісекундах, якщо хочете.
Наведіть курсор на блок
Використання на практиці
Добре, а де це вам може стати в нагоді в дійсності? Наприклад, при розробці меню, що випадає. Як бачите, за допомогою css3 і плавного появи елементів сьогодні можна зробити таку навігацію навіть без використання скриптів. А це покращує продуктивність вашого інтернет-ресурсу.
Можна навести й інший приклад. Наприклад, щоб при наведенні на кнопку "Зворотній зв'язок" з'являлася форма, в яку можна записати своє повідомлення. Це тільки те, що я тільки що придумав, на ділі ж можна винайти набагато більш цікавих речей, в яких використовуються плавні переходи.
Приклад використання - плавне поява пояснення до зображення
Давайте розглянемо такий простий приклад. У мене є картинка і я хочу, щоб до неї плавно виводилося пояснення. Ось картинка:
Укладемо її в блок і додамо абзац з поясненням:
Залишається додати потрібні стилі:
І ось що вийшло:
Стрибок на мотоциклі
Як бачите, блок з поясненням з'являється плавно завдяки заданому властивості transition. У першому прикладі в цій статті я використовував лише один параметр цієї властивості - час. Цього разу параметрів більше:
transition: left 0.3s linear;
top - це назва властивості, до якого потрібно застосувати планвний ефект. В цьому випадку плавність буде застосована тільки до властивості top і більше ні до якого іншого.
0.3s - це зрозуміло, час переходу.
linear - функція переходу. Це окрема і не найпростіша тема. До слова, є ще такі функції: ease-in, ease, ease-out. Спробуйте, напевно помітите невелику різницю.
Тобто саме повільне висування стало можливо завдяки властивості transition. якби його не було, то напис з'являлася б різко, що вже виглядає не так круто. Ну а сам абзац з текстом рухався за допомогою абсолютного позиціонування. Про це та інші види позиціонування ви можете прочитати в цій статті.
Цікаве зі світу сайтобудування
Ви підписалися. Дякую.