Анимация от дисплейния блок за показване на нито един

Би било чудесно да направите това, но в момента това не е възможно и мисля, че никога няма да стане реалност (например как да анимирате да „display: table“?). Но има възможност да се направи маневра с кръгово движение и ще опиша един от тях тук.

Защо да анимирате "дисплей"?

Анимирането на свойството display се изисква за решаване на следния проблем:

Необходимо е елементът постепенно визуално да изчезне от страницата.

Не искате този елемент да заема място след изчезването му (например искате да изчезне, за да задейства презареждане).

Практически курс за оформление на адаптивен уебсайт от нулата!

Вземете курс и научете как да подреждате модерни уебсайтове в HTML5 и CSS3

Трябва да използвате CSS за анимация, а не библиотека.

Поради тази причина не е достатъчно просто да анимирате непрозрачността до нула, тъй като елемент с нулева непрозрачност заема същото място на страницата. Нека да видим как да решим този проблем стъпка по стъпка.

Използвайте непрозрачност и дисплей

Първото нещо, за което може да помислите, е да се възползвате както от непрозрачността, така и от свойствата на дисплея. Нашият HTML ще изглежда така:

Обърнете внимание, че на дисплея: няма и непрозрачността: 0 е присвоен клас „скрит“. Ако превключите „скрития“ клас с помощта на jQuery, ще получите нещо подобно:

Но ако направим това, няма да видим ефекта на прехода (дефиниран в блока за описание .box). Вместо това ще видим това (малко по-различно във Firefox в сравнение с Chrome/IE10):

Натиснете многократно бутона „превключване на видимостта“ и ще видите как блокът изведнъж ще изчезне и ще се появи отново без никакви преходи. За да поправите това, можете да опитате да отделите свойството на дисплея от непрозрачността в CSS:

---