zly div animacja

Question

Witam chciałbym zrobić aby po kliknięciu ikonki niewidoczny dotychczas div pokazał się z animacją. Chodzi o pojawienie się go pomiędzy navem a contentem.

Comments

Nie chciałem zbytnio js bo narazie słabo go znam, ale skoro mówcie, że to najlepsze rozwiązanie to czas zacząć naukę nowej rzeczy. Mam pytanie czy dla ok. 90% użytkowników js zadziała w przeglądarce?

Answer 1

Odpowiedź: JavaScript. Bezpośrednio w CSS nie zrobisz obsługi zdarzeń.

Hasła bardziej precyzyjne to np. document.getElementById, document.querySelector do pobrania referencji DOM. Dalej metoda addEventListener to obsłużenia zdarzenia "click" i na koniec bezpośrednia zmiana właściwości CSS np. element.display="block" ale jeśli Ty chcesz animację to lepiej byłoby po prostu dodać odpowiednią klasę do elementu metodą element.classList.add (albo toggle, zależy co dokładnie ma się dziać itp.).

Proponuję, abyś spróbował coś sam posklejać przy pomocy google i najwyżej wtedy pomożemy podszlifować kod :)

Answer 2

Javascript wchodzi w grę?

Comments

Niestety tylko css

---

W CSS nie ma obsługi zdarzenia kliknięcia. Można kombinować z hover ale to byłoby bardzo naciągane.

A dlaczego nie JS, na jakie urządzenia będzie ta strona, że tak ważne jest aby nie ładować skryptów?

---

No to niech przycisk otwierający diva będzie linkiem do tego diva (to jest do jego id, link z #, tzw. kotwica).

Niech div będzie ukryty, a pokazywany na :target. Ta pseudoklasa oznacza właśnie element wskazany przez kotwicę w URLu.

Szczegóły (o kotwicy i o :target) poczytasz w necie.

 

Jeśli to ma być tylko pokazywanie diva, to zastosowanie tutaj kotwicy do pokazania go jest średnio semantyczne, ale skoro tylko CSS...

Inna opcja to sztuczka z :checked, jeśli nie chcesz operować linkiem: ostyluj label na przycisk, połącz go z polem "checked" i potem pseudoklasą :checked i selektorem brata wskaż na div. A checkbox ukryj.

 

@Tomek Sochacki, nie mów, że nie ma, bo to zawsze odważne stwierdzenie.

---

Heh, przyznam, że nie wpadłbym na to :D Nie miałem jeszcze okazji pisać apki dla urządzeń, które nie obsługują JS, albo był to znikomo mały procent, więc jakoś szczególnie się tym nie przejmuję, tym bardziej, że ostatnio więcej w React siedzę, więc raczej JS jest potrzebny:)

(oby mnie za tę wypowiedź nie pobił Comandeer... :)

---

@Schizohatter

Bezpośrednio nie ma, ale kombinować zawsze można :) Nie chce mi się szczerze mówiąc sprawdzać Twojej metody, ale wydaje się w miarę oki i odemnie plusik za pomysłowość :)

---

Niektórzy mogą nie chcieć używać JS z różnych powodów, poczynając od tego, że nie umieją xd

Jeśli chodzi o Comandeera, to musisz zrozumieć, że chodzi o to, aby nie przesadzać z JSem i nie uniezależniać od niego stron, które tego nie potrzebują (bo mogą używać SSR).

Aplikacje wykonujące różne działania w JS to co innego, a co innego zwykłe strony typu portfolio, które padają po tym, jak się wyłączy JS, a JS dostarcza im tylko efektów wizualnych.

---

Z tym SSR to też zależy co i jak. Na przykład w aplikacji, która co chwile łączy się z API to samo SSR niewiele pomoże gdyż i tak user bez JS niewiele zrobi w apce. Ale tak jak piszesz, wszystko zależy od celu strony. Co innego apki, a co innego prosta wizytówka. Czasami widać nawet usilne podciąganie jQuery do zrobienia animacji, które bez problemu można ogarnąć @keyframes :)

Problem jednak np. jak odpalić bez JS animację dopiero po zjechaniu "scroll" itp. Wiesz, chodzi mi o "zasymulowanie" srcollTop, getBoundingClientRect itp. Chyba, że tu również miałbyś jakiś pomysł to normalnie pogromiłbyś 80% zastosowań jQuery :D

Ale tak na serio, to co do Comandeera to ma wiele racji. A Twój pomysł na clicka będę musiał zaraz z ciekawości potestować i wpisać na listę CSS trick :)

---

Nie chciałem zbytnio js bo narazie słabo go znam, ale skoro mówcie, że to najlepsze rozwiązanie to czas zacząć naukę nowej rzeczy. Mam pytanie czy dla ok. 90% użytkowników js zadziała w przeglądarce?

---

Zadziała prawdopodobnie dla 99.9%. To, że nie zadziała, to edge-case w dzisiejszych czasach (i w naszym regionie świata!). Warto jednak pamiętać o tym, że mogą być problemy z załadowaniem JS (bo nie zawsze odbiorcą treści jest przeglądarka/narzędzie obsługujące JS), lub mogą być problemy z połączeniem itd.

---

Myślę, że spokojnie można dzisiaj przyjąć 99%. Osoby, które celowo i świadomie wyłączają JS ja sobie odpuszczam - jeśli ktoś umie wyłączyć to umie i włączyć jeśli będzie potrzebował. A co do reszty to jedyne o co staram się zadbać to transpilacja kodu i ewentualne załadowanie polyfill żeby odpalać stronę na starszych przeglądarkach.

Jeśli nie znasz to warto poznać, bo JS to fajna sprawa i w webie na pewno Ci się przyda. Jak już poznasz nieco podstaw to poczytaj sobie też np. o webpack i npm.

Answer 3

Witam. Jezeli css to :target

<a href="#content"><button>rozwiń opis</button></a>
<div class="content" id="content">Opis produktu</div>
<p>content</p>

body{
  background-color: #000;
  color: #fff;
}
.content{
  height: 0;
  overflow: hidden;
  transition: all 1s;
}
:target {
  height: 18px;
}

 

Comments

Czemu dałeś class i id w jednym divie? A przy okazji poleca ktoś dobry kurs js?

---

id określa element do którego prowadzi odnośnik. Klasa słuźy tylko do ostylowania.

Gdyby ostylować id (co jest złą praktyką)to pseudoklasa :target nie nadpisała by id. Może powinienem użyć innych nazw.

---

ok zrozumialem

---

To nie działa, bo rozwijanie jest płynne, ale gdy to ma się schować to zwija sie do poziomu tekstu, mimo, że mam ustawioną wyskość na 0px i overflow:hidden;. Co mam zrobić? (zmiana rozmiaru czcionki nie pomaga)

---

Sorry za bład. Miałem usawoiny padding :) Dzięki za pomoc!

---

A jak realizujesz ukrywanie ?

---

Chodzi ci o opacity?