Rozgałęzienie Bootstrap 3 Rozproszone Dziwne zachowanie, gdy pasek nawigacji zwinął się

Dodałem więc pewne animacje do rozwijanych menu, ale z jakiegoś powodu najbardziej akceptowana odpowiedź (Adding a slide effect to bootstrap dropdown) wydaje się pękać lub stać się "zwykłą" wielkością podczas przesuwania w małych rozmiarach okien .Rozgałęzienie Bootstrap 3 Rozproszone Dziwne zachowanie, gdy pasek nawigacji zwinął się

więc dziwne jest to tylko wydaje się stało z animacją slideUp z artykułu Wysłany:

// ADD SLIDEDOWN ANIMATION TO DROPDOWN // 
$('.dropdown').on('show.bs.dropdown', function(e){ 
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(5000); 
}); 

// ADD SLIDEUP ANIMATION TO DROPDOWN // 
$('.dropdown').on('hide.bs.dropdown', function(e){ 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(5000); 
});

mogę kopiować i wklejać te linie do konsoli Google Chrome na http://bootswatch.com/default/, zmienić rozdzielczość na taki, w którym zapadają się navbary i wszystkie się psują. (I przedłużone czasy animacji, aby spróbować rozwiązać.)

Normalnie:

Normal Menu

Złamane slideUp:

SlideUp

Ale z jakiegoś powodu, jeśli biegnę $('.navbar').find('.dropdown-menu').slideUp(5000); otrzymuję normalne menu zachowań:

Expected Behavior

Myśli?

Aktualizacja Działa z ostatnią opcją, ponieważ nie powoduje usunięcia klasy "otwartej" z otaczającego elementu LI listy rozwijanej. Być może klasa open jest przedwcześnie usuwana podczas animacji.

Aktualizacja 2 mogę jakoś naprawić używając preventDefault:

// ADD SLIDEUP ANIMATION TO DROPDOWN // 
$('.dropdown').on('hide.bs.dropdown', function(e){ 
    e.preventDefault(); 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(300, function(){ 
    $(this).parent().removeClass('open'); 
    }); 
});

Źródło

2014-10-08 Kyle Johnson

Jestem również widząc artefakt animacji na slideDown(), jak również. Wydaje się, że skacze na końcu. Wierzę, że jest to również związane z klasą "otwartą". –

Próbowałem powyższego rozwiązania i wydaje się, że działa dobrze dla mnie w tworzeniu animacji '.slideUp' tak bezproblemowo jak' .slideDown'. Powiedział, że nie używam Bootswatch. – Vercingetorix

Czy mówisz o rozwiązaniu z mojej aktualizacji 2? Wydaje się, że działa, ale mam wrażenie, że błąd znajduje się w pliku bootstrap.js, który nie czeka na przejście. Zwinięta animacja navbar działa bezbłędnie, ale jest zakodowana w inny sposób niż w liście rozwijanej. –

Trudno, nie będąc w stanie kontrolować elementy, ale mam przeczucie, że problem może leżeć w pojemniku z klasą " drowpdown-menu "(lub dowolny element faktycznie ma pasek przewijania dołączony do niego, jeśli nie jest to menu rozwijane). Nie sądzę, aby wystąpił problem z jQuery, ale chciałbym spróbować dodać styl do kontrolowania przepełnienia właściwości. Spróbuj ustawić ją jako ukrytą, aby zmusić pole do wyjścia poza granice strony. Główny zwój powinien sobie z tym poradzić. Jednak z punktu widzenia UX ostrzegam cię przed tworzeniem menu z dużą ilością zagnieżdżania, co może skutkować słabym doświadczeniem dla użytkownika końcowego.

Źródło

2017-05-15 18:01:11

$(document).ready(function(){ 
 
    $(".class-name").click(function(){ 
 
     $(".class-name").slideToggle(1000);//hear you can change value of slidetoggle i.e "slow","fast", or any number 
 
    }); 
 
});

Źródło

2017-05-30 09:13:49

Rozgałęzienie Bootstrap 3 Rozproszone Dziwne zachowanie, gdy pasek nawigacji zwinął się

Odpowiedz

Powiązane problemy