Animacja rozwijanego menu w Bootstrap.

Question

Witam. 

Mam nawigację stworzoną na Bootstrap'ie, która znajduje się pod tym linkiem. Zmieniłem ją w taki sposób, że elementy test i akwarystyka rozwijają się po najechaniu na nie, a nie po kliknięciu (domyślnie). Rozwijanie po najechaniu działa na bazie visibility: hidden, visible. 

I tu powstaje moje pytanie. Dodałem do tego opacity i chciałem zrobić animację pojawiania się za pomocą tej linii kodu: 

transition: visibility 0s, opacity 5s linear;

Niestety gdzie tego nie włożę, to animacja nie działa. Co mogę zrobić aby animacja działała? 

Pozdrawiam.

Answer 1

.dropdown:hover .dropdown-menu {
    display: block;
}

operujesz na display, który jest nieanimowalny.

prosty przykład: http://jsbin.com/siwitadece/edit?html,css,js,output

sprawdź jak działa, a później odkomentuj display:none i block.

Comments

To niestety nie działa, bo skrypt Bootstrapa operuje na display. :/

---

To bedzie bez animacji albo zrezygnuj z BS-a

Answer 2

Witam. Można posłużyć się wysokością. Czyli height: 0; oraz np: transition: all 1s; i po najechaniu docelowa wysokość;

Comments

Niestety nie mogę tak zrobić ponieważ skrypt Bootstrapa odpowiedzialny za pokazywanie tego operuje na display.

---

W takim razie zostaje jquery :(

Podpowiedź :)

animacja menu display none

animacje wziąłem z CSS Animations Generator

Można sobie coś wybrać. Inna do pokazania inna do schowania.

Что есть в печи, всё на стол мечи.