płynne pojawianie się obiektu na stronie

Question

Mam stronę, która zawiera ukryte 4 divy (visibility: hidden) i 4 odnośniki na górze. Jak zrobić, aby po kliknięciu pierwszego odnośnika płynnie pojawił się pierwszy div?

Answer 1

Możesz to zrobić używając biblioteki jQuery. Link: http://blog.grabowski.ostrowwlkp.pl/kursy/jquery-2-zdarzenia-i-animacje-na-stronie#codesyntax_1

Comments

Można tylko jaki jest sens zaprzęgać do tego całą bibliotekę skoro to samo można zrobić w czystym js i tak naprawdę w kodzie o podobnej długości? :)
Odpowiadając na pytanie najprościej zrobić klasę z animacją, która zmienia na przykład opacity oraz translate i dodać te klasę po kliknięciu do danego diva

Answer 2

Witam. Można również użyć pseudo klasy :target oraz właściwości transition zmieniając wysokość diva od 0 do max.

Comments

Robiłem tak, ale animacja nie działa :/

---

A jednak działa, wystarczyło przenieść wpis transition na dół :P

Answer 3

Zdarzenie click => przepisz klasę CSS z animacją (keyframes) (!pamiętaj o animation-forwards).

Comments

Ale jak? Nie do końca ogarniam JS

---

classList.add np: