Collapse navigation

Question

oto kodziki:

  .navbar-collapse {
    transition: all .15s ease-out;
    max-height: 0;
    overflow: hidden;
    @media only screen and (min-width: 48em) {
      max-height: none;
    }
  }
  .navbar-toggle {
    @media only screen and (min-width: 48em) {
      display: none;
    }
  }
  .collapsed {
    max-height: none;
  }

Pro gracze w cssa pewnie zauważyli, że animacja collapse (transition: all .15s ease-out) nie zadziała w tym wypadku.

Więc moje pytanie brzmi, jak zrobić animowany collaps navbar (chodzi o animowaną zmiane wysokości), by zadziałała bez użycia JSa, nawałnicy kodu i dodatkowych bloków. A i fixed height mnie nie zadowala. :P 

W razie potrzeby mogę wrzucić reszte kodu na gitsa.

Answer 1

Translate? Po schowaniu menu dopiero wtedy go ukrywasz.

Comments

Schowaniu menu czyt.: wysuniesz je poza obszar widzenia. Ukrywasz - dajesz display:none(chociaż nie jest to najszczęśliwsza metoda ukrywania czegokolwiek, szczególnie menu). Jest to do zrobienia i nie jest trudne.

---

> Po schowaniu menu dopiero wtedy go ukrywasz.

O ile wiem, to css chyba nie ma onEvent, więc jak rozpoznam, czy dany element zniknał mi z oczu?

---

Możesz zrobić to za pomocą checkboxa. Menu chowa się, jeżeli checkbox jest :checked.

---

nie do konca o to mi chodzilo :P

Ktos klika w button i menu automatycznie sie zwija i jest ustawiane na display:none... czyli nie widać animacji, bo display:none działa natychmiastowo :P

Answer 2

wystarczy operować

height: 0;

i

height: auto;

 

Comments

height nie działa z transition :P

---

Działa, ale nie z wartością auto ;/

---

> A i fixed height mnie nie zadowala.

Answer 3

Witam. Może to Bootstrap dropdown animation

Answer 4

Czemu  height Cię nie zadowala? Czemu nie chcesz użyć JS? Nie polecam iść drogą :checked, o wiele lepiej przypiąć listenera z clickiem :)

Comments

Nie polecam iść drogą :checked

A czemu?

---

JS tylko zajmuje się stanem danego navbara (collapsed, non-collapsed) za pomoca togglowania klasy

---

@xmentor

Bo jest to niepraktyczne i nieintuicyjne. Od takich rzeczy jest Javascript :)