[hakeryk2]

Ma ktoś jakiś uniwersalną animację #css bazującą pseudo elementach after i before, która po dodaniu do dowolnego elementu pobiera od niego cały rozmiar i tworzy overlay np z animacją tak jak na fejsie (pic rel) poprzez animację gradientu wykorzystującego różne opacity kolorów?

Chodzi mi o to by każdy element który jest ładowany ajaxem w beforeSend dostawał tę klasę i przy success ją usuwał :) Niezależnie element, niech dostaje pseudo animowane. W necie są miliony spinnerów, mega wypaśnych animacji ale nie ma tych najprostszych, które są płynne.

#webdev

[niktvvazny]

@hakeryk2: Na ::before i ::after tego nie zrobisz.

[hakeryk2]

@niktvvazny: Zrobi zrobi ale mi się nie chce i może ktoś ma gotowca do edycji.

[niktvvazny]

@hakeryk2: Elementy, których dane są ładowane asynchronicznie nie będą miały swojej wysokości ani, w większości przypadków szerokości (przez brak zawartości). No chyba, że każdego ustawisz na sztywno ale wtedy to gówno kod.

[hakeryk2]

@niktvvazny: https://cssanimation.rocks/pseudo-elements/

[niktvvazny]

@hakeryk2: Efekt nijak ma się do efektu ładowania z facebooka. Poszukaj sobie "skeleton loading".

[hakeryk2]

@niktvvazny: To tylko szkielt animacji - można ją w sumie dopasować.

[niktvvazny]

@hakeryk2: Animacja może być, możesz nawet skaczące króliczki dodać. Problem w tym, że chciałeś aby był szybki gotowiec na before i after. Te pseudo elementy mogą faktycznie wypełnić rozmiar "rodzica" ale w Twoim przypadku bez ustawienia na sztywno rozmiarów to nie będzie miało sensu. Dopóki w elementach nie będzie treści ich rozmiary będą 0 na wysokości i w większości przypadków na szerokość dlatego takie rozwiązanie nie zadziała, a dodawanie na sztywno

[hakeryk2]

@niktvvazny: Poszliśmy za daleko w temacie a i ja się nie doprecyzowałem - chodzi i mi utworzenia elementu podczas ładowania. Np Div z tekstem "Ładowanie..." który zawsze będzie otrzymywał 100% rozmiaru rodzica w którym się znajduje a który zostanie usunięty gdy załaduje się ajax. Ta animacja będzie wewnątrz już ustalonego kontenera, który posiada swoje właściwości i dlatego pseudo element przejmie je po nim.

@schriker nie plusuj tylko pomóż :D Ostatnio gdy

[niktvvazny]

@hakeryk2: Czyli nie chcesz jak na facebooku tylko chcesz aby cały kontener migał tym efektem, który podesłałeś?

[hakeryk2]

@niktvvazny: Dokładnie :) Dodany pseudo element pobierający dane rozmiaru z rodzica.

[niktvvazny]

@hakeryk2: Nie wiem czy dobrze zrozumiałem i tak na szybko: link

[hakeryk2]

@niktvvazny: W sumie to tak, wystarczy tylko by animacja trzymała infinite zamiast forwards, podmienić linear gradients i wsio. Teraz dochodzę do wniosku, że napisałbym to szybciej niż trwa ta dyskusja :D Życie. Dzięki za owocną dyskusję.