2016-08-09 5 views
0

У меня проблема с переходом бутстрапа navbar. коллапса имеет нервный переход, когда рушится элемент имеет отступыСбой перебора загрузочного лотка

Я гугл этот вопрос и, кажется, что эта проблема является утеплителем:

.menu-menu-container{ 
    padding: 100px 30px 60px 30px; 
    background-color: yellow; 
} 

на самом деле, если я удалить обивка из меню-меню- элемент контейнера, анимация работает хорошо, и это очень гладко

это я мой codepen>http://codepen.io/mp1985/pen/EyOJYE

Как я могу достичь того же результата без этого странного вопроса?

любая помощь, предложение или совет?

ответ

0

Попробуйте добавить CSS-переход к затронутым элементам. Это сделает переход менее быстрым, так как браузер будет анимировать между различными прокладками. Вы можете настроить каждое свойство анимации CSS с собственными параметрами времени. Вы можете увидеть различные Animatable свойства здесь: http://www.w3schools.com/cssref/css_animatable.asp

// will want to make this selector more targeted/meaningful 
 
* { 
 
    -webkit-transition: all 0.3s; 
 
    -moz-transition: all 0.3s; 
 
    -ms-transition: all 0.3s; 
 
    -o-transition: all 0.3s; 
 
    transition: all 0.3s; 
 
}

1

Сво происходит из-за максимальной высоты класса Navbar коллапса, который 340px использование ниже кода для обработки его. http://codepen.io/rahulchaturvedie/pen/VjVOLa

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { 
    max-height: none; 
} 
+0

спасибо Рахул, кажется, работает !!! – mattia

1

Проблема вызвана заполнения контейнера вы разрушающейся. Это усложняет расчет высоты по collapse.js

Пример:

HTML

<div class="collapsible-div padding-values"> 
     // YOUR CONTENT 
    </div> 

CSS

.padding-values{ 
    padding: 20px 40px 30px; 
} 

это будет исправлено, если вы переместить прокладку на внутреннюю контейнер:

HTML

<div class="collapsible-div"> 
    <div class="new-container padding-values"> 
    // YOUR CONTENT 
    </div> 
</div> 
Смежные вопросы