Анимация от „дисплей блок“ до „дисплей няма“, Javascript
Може да знаете, че свойствата на прехода и анимацията в CSS3 могат да се използват за анимиране на специфични свойства на CSS. Но има свойства, които не могат да бъдат анимирани. Един от тях е дисплей .
Би било много полезно да анимирате това свойство, но това не е възможно, както ми се струваше доскоро (е, например, как да анимирате нецифров дисплей: свойство на таблицата?). Но има решение, което ще покажа в тази статия.
Защо може да искате да анимирате свойството "display"?
Необходимостта от анимиране на свойството на дисплея може да произтича от необходимостта от решаване на следните проблеми:
- Трябва да накарате обекта да избледнее от страницата;
- Не искате елементът да заема място след изчезването му (например, трябва да предизвикате възстановяване на изходния поток, след като някой обект изчезне);
- Искате да използвате CSS изключително за анимация, без да използвате библиотеки на трети страни.
Въз основа на горното, промяната на непрозрачността на нула не е достатъчна, тъй като елемент с нулева непрозрачност пак ще заема място на страницата.
Нека решим проблема стъпка по стъпка.
Използване на непрозрачност и дисплей
На първо място, ще се опитаме да използваме както непрозрачност, така и свойства на дисплея. HTML кодът ще бъде такъв:
CSS кодът може да изглежда така:
В класа "скрит" имаме display: none и непрозрачност: 0. Ако заменим този клас с помощта на jQuery, тогава можем да използваме следния код:
Ако обаче направим това, няма да видим ефекта на преход, който е дефиниран в блока на стила .box. Ще изглежда така (пример във Firefox е малко по-различен от Chrome/IE10):
Натиснете няколко пъти бутона „Превключване на видимостта“ и ще видите, че правоъгълникът изчезва и се появява моментално, без преход.
За да коригираме това, можем да опитаме да отделим свойството display от непрозрачността в CSS файла:
Сега можем да превключваме и двата класа на свой ред:
Тази опция обаче няма да ни помогне да изпълним задачата:
Нуждаем се от елемента първо да изчезне визуално от страницата и след това напълно да се премахне.
Дори да комбинираме непрозрачност: 0 с видимост: скрито, въпреки наличието на анимация, елементът пак ще заема място на страницата след изчезване, което отново не ни устройва.