Бъдещето на CSS анимациите: нови функции за броене и селектори за по-лесни staggered анимации

Познато ви е онова усещане, когато имате мрежа от карти и искате всяка една от тях да изчезва постепенно, една след друга?

Този ефект на последователно изтичане, на каскадно появяване — изглежда страхотно. Трябва да бъде просто. Но всеки път, когато съм го създавал, начинът на имплементация ме караше да се чувствам, като че ли правя нещо фундаментално погрешно.

Какво предстои в CSS за анимации и селектори

В момента спецификацията на CSS позволява да се броят всички елементи-братя и сестри на даден елемент при използване на функции като :nth-child(). Но работната група по CSS (CSS Working Group, CSSWG) е документирала разширение, което предстои да бъде добавено — в Issue #9572 е обсъдена възможността за аргумент към функцията, който да приема CSS селектор.

Нещо като sibling-index(of ) ще позволи да броите само тези братя/сестри, които съответстват на даден селектор. Например един елемент може да бъде осми в цялата група деца, но трети сред тези, които са маркирани с клас .active. В такъв случай sibling-index(of .active) ще върне 3.

Това е изключително полезно за динамични интерфейси, при които елементите се филтрират или тяхната видимост се сменя — така индексите остават последователни, без да е необходимо активно манипулиране на DOM-а.

Бъдещи функции за броене на елементи

Освен sibling-index(), CSSWG обсъжда и други функции като children-count() и descendant-count(). Първата би върнала броя на децата на даден елемент — много полезно в ситуации, където родителят иска да разбере колко елемента има и да базира своето оформление (layout) на това знание. Втората, descendant-count(), би броила всички потомци, включително и вложените на няколко нива, чрез рекурсивно ръкета.

И двете функции са все още в стадий предложение, но ако бъдат приети, ще завършат цялостната концепция за "броене" в дървото на елементите.

Така имаме една хоризонтална перспектива — sibling-index() и sibling-count(), които показват „къде се намирам сред другите елементи на едно ниво“.

И една вертикална перспектива — children-count() и descendant-count(), които показват “какво има под мен” и колко елемента се намират на по-ниските нива.

Защо сегашните решения са неудобни

Връщайки се към началната ситуация с каскадното, слабо по слабо появяване на карти — в момента се налага да пишете много правила на база :nth-child() за всеки елемент, който искате да анимирате поотделно.

Това е не само неудобно, но и често изглежда като излишно усложнение. Усилието да се направи това с чист CSS без помощ от JavaScript по същество ви оставя с много повторения и сложна логика.

Това усещане, че правите нещо "глупаво" или твърде сложно, просто идва от факта, че "очевидното" решение — броене на индекс само сред активните елементи — все още не е имплементирано в CSS.

То е на път да се появи чрез тези нови функции. Когато това стане, например с прилагането на sibling-index(of .active), целият процес по създаването на staggered animation ще стане далеч по-елегантен и ясен.

Как това ще промени уеб разработката

За създателите на интерфейси означава по-малко код, по-малко грешки и по-голяма яснота при работата с анимации и динамични списъци. Вече няма да е нужно да пишете по десетина правила, само за да приложите единствена поредност при откриването на елементите, които се показват.

Освен това, такъв начин за работа значително ще облекчи поддръжката и развитието на по-сложни дизайни, особено когато списъкът от елементи е динамичен — например филтриране, сортиране, add/remove операции и други.

CSS ще може по-добре да реагира на контекста и актуалното състояние на документа без помощта на външни скриптове.

Заключение

Функциите и разширенията, които CSSWG разработва, целят да направят селекторите и броенето на елементи по-гъвкави и мощни.

Те ще доведат до по-логичен, семантичен и удобен начин за изграждане на анимации с "каскадно" поведение на елементи, както и интерфейси с динамично обновяване.

Ако и вие сте изпитвали раздразнение при писането на десетки :nth-child() правила за staggered animations, спокойно — вашето усещане не е само в главата ви. Очаквайте в близко бъдеще по-добри инструменти, които ще ви спестят много време и нерви.

Очевидното просто още не бе налично, но предстои да бъде факт.

Този кратък преглед показва ролята на новите CSS функции и как ще улеснят уеб разработчиците с по-интуитивни и чисти решения за броене и селектиране сред елементи, които са от значение в текущия визуален и логически контекст на страницата. Ще остане да следим развитието в работната група и да усвояваме новите възможности веднага щом бъдат внедрени в браузърите.