Анімація, розваги від display block до display none
Відмінно було б це зробити, але зараз це неможливо і, думаю, ніколи не стане реальністю (наприклад, як анімувати до “display: table”?). Але є можливість зробити обхідний маневр, і один із них я тут і опишу.
Навіщо анімувати “Display”?
Анімувати властивість display потрібно для вирішення наступної проблеми:
Потрібно, щоб елемент поступово зорово зникав зі сторінки.
Вам не хочеться, щоб цей елемент займав місце після свого зникнення (наприклад, потрібно, щоб його зникнення викликало переливання).
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Потрібно використовувати для анімації CSS, а не бібліотеку.
З цієї причини недостатньо просто анімувати opacity до нуля, так як елемент з нульовою непрозорістю займає те саме місце на сторінці. Погляньмо, як крок за кроком вирішити цю проблему.
Використовуйте Opacity та Display
Перше, про що ви можете подумати – скористатися властивістю opacity, і display. Наш HTML виглядатиме так:
Display: none і opacity: 0 присвоєний клас "hidden". Якщо перемикати клас “hidden” за допомогою jQuery, вийде приблизно такий код:
Але якщо так зробити, ми не побачимо ефекту переходу (визначеного в блоці описів .box). Замість нього ми побачимо це (злегка відмінне у Firefox у порівнянні з Chrome/IE10):
Багато разів натисніть кнопку 'togglevisibility' і побачите, як блок без будь-яких переходів несподівано зникатиме і з'являтиметься. Щоб це виправити, можна спробувати відокремити CSS властивість display від opacity:
Потімможна переключити обидва класи, один за одним:
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Крім того, що потрібно реверсувати ці два рядки при появі блоку, це ще й не спрацює, як видно:
Нам потрібно, щоб елемент візуально зникав, а потім видалявся зі сторінки після закінчення зникнення ідентично функції зворотного виклику. (Крім того, навіть якщо ми скомбінуємо opacity: 0 з visibility: hidden, анімація вийде добре, але елемент після свого зникнення продовжить займати місце на сторінці, так що все це не спрацює.)
Чому не працює?
До переходу до свого методу я просто поясню, чому неможливо зробити нічого, просто змінюючи класи один за одним. По-перше, якщо ви додаєте класи як у наведених вище прикладах, і якщо перехід навіть спрацював, то вам доведеться встановити окремий розділ для видалення класів і реверсування (тобто якщо блок спочатку прихований, вам доведеться встановити його на display: block, а потім змінити непрозорість).
Це походить від того, що непрозорість 'opacity' намагається анімуватися відразу ж, і навіть якщо на частку мілісекунди вона дійсно анімується, ви цього не побачите, тому що display: none почне діяти так само швидко. Можна резюмувати проблему, яку нам потрібно вирішити, так:
Коли елемент помітний, спочатку анімуйте непрозорість, а потім, коли це виконано, зробіть його display: none.
Коли елемент невидимий, спочатку зробіть його display: block, потім (поки він візуально прихований, але вже існує на сторінці), анімуйте непрозорість.
Можливе рішення
Ймовірно, існують інші способизробити, і я буду радий дізнатися, як ви вирішили б цю проблему. Але моя думка. CSS той же (з двома все ще розділеними класами 'hidden'), але jQuery буде виглядати так: