Вопрос по twitter-bootstrap-3, jquery, collapse, google-chrome – Bootstrap 3.0 Свернуть горизонтально - отскок в Chrome

4

м следуя инструкциям здесь (https://stackoverflow.com/a/18602739/2966090) свернуть элементпо горизонтали в Bootstrap 3.0.2.

Этот метод отлично работает в Firefox Internet Explorer, но имеет странный скачок нашоу в хроме. Chrome также нене может быть никакого перехода наhide.I»

m создал тест с поведением здесь:http://jsfiddle.net/eT8KH/1/

Вот's связанный код (также на jsfiddle):

CSS

#demo.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

HTML


    Horizontal Collapsible



    
        
            Here is my content
        
    

Есть ли способ это исправить? Или это ошибка в Chrome?

jsfiddle из вашего демонстрационного кода, который вы копируете, неТакже не работает в Chrome. Вот'Это простое использование переключателя, которое, я думаю, выполняет то, что вы собираетесь:webskee.com/js/animated-toggle Matt Lambert
Спасибо за помощь, Мэтт. Это может сработать, хотя яЯ надеюсь на способ работы с функциональностью, предоставляемой Bootstrap. Если я могу'т, тогда мне, возможно, придется пойти с чем-то в этом роде. JoshMB

Ваш Ответ

1   ответ
2

но решение, которое я нашел, не связано с Chrome.

Я обнаружил, что CSS-код отсутствует и немногоошибка» в коде плагина. Я уже написал PR, чтобы исправить это, смотрите:https://github.com/twbs/bootstrap/pull/15104

Демо-версия:http://jsfiddle.net/zu5ftdjx/

Чтобы исправить эту проблему в вашем текущем коде:

в collapse.js: строка 104 должна статьthis.$element[dimension](this.$element[dimension]())[0][$.camelCase(['inner', dimension].join(''))]

Меньше (в component-animations.less)

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  .transition-property(~"height, visibility");
  &.width {
  .transition-property(~"width, visibility");
  width:0;
  height:auto;
  }
  .transition-duration(.35s);
  .transition-timing-function(ease);
}

CSS (скомпилированный вывод предыдущего кода Less)

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

Похожие вопросы