Переходы CSS в Edge и IE11 не работают

Я не часто сталкиваюсь с проблемами CSS, но это заставляет меня почесать голову.

В этом плагине http://plnkr.co/i2Fxol все работает точно так, как ожидалось, во всех браузерах, с за исключением IE10 и 11, а также Edge полностью не может применять переходы css к некоторым элементам, а не ко всем. И сколько бы я ни смотрел на него, я не могу понять, почему он не работает именно в этих местах. (здесь добавлен CSS, но его нужно рассматривать в контексте, так как это очень упрощенное представление)

#navigation ul {
  display: block;
  list-style: none;
  overflow: hidden;
  transition: all .2s ease;
}

По сути, они рыгают, когда аккордеон открыт, а меню можно расширять и сжимать за заявленные 0,2 секунды. Все остальные переходы работают.

О, теперь я собираюсь добавить закрытие путей svg в HTML5 только для того, чтобы удалить эти совершенно бессмысленные предупреждения в IE и Edge.

редактировать

Начальные высоты для гармошек набираются под нагрузкой так:

...
var initialHeights = document.getElementsByClassName("level-1");
var values = [];
for(var i = 0; initialHeights.length > i; i++){
  values.push(initialHeights[i].offsetHeight);
}
...

Затем они обнуляются встроенными значениями, которые безопасно хранятся в массиве, используя:

function toZero(){
  for(i = 0; mainSubMenus.length > i; i++){
    mainSubMenus[i].setAttribute("style", "height:0;");
  }
}
toZero();

Это позволяет использовать css для перехода между нулевой высотой и известным значением.

головной мозг

Я подумал, что, может быть, следующее излечит больных:

mainSubMenus[i].style.height = 0;

Я был неправ.


javascript css internet-explorer microsoft-edge
person Stuart Harding    schedule 27.07.2016    source источник
comment
Вы анимируете какой-либо элемент от display: none до display: block?   -  person Ason    schedule 27.07.2016
comment
Нет, высота. Высота извлекается из загрузки, когда высота элементов известна до того, как они будут установлены в 0.   -  person Stuart Harding    schedule 27.07.2016
comment
Можете ли вы уточнить, какая анимация не работает должным образом? GIF, контрастирующий с поведением Edge и Chrome, также был бы полезен; вы можете получить отличное приложение для этого по адресу screentogif.codeplex.com.   -  person Sampson    schedule 27.07.2016
comment
Edge — это, а Это Chrome. Вы увидите, что в Edge переходы аккордеона к расширению и сворачиванию происходят мгновенно, тогда как в Chrome (и во всех других, кроме IE) плавные. Это единственные анимации, которые не воспроизводятся должным образом. Все остальные работают как положено.   -  person Stuart Harding    schedule 28.07.2016

Ответы (1)


arrow_upward
0
arrow_downward

Я считаю, что проблема здесь в отсутствии начальной высоты. Если вы циклически перебираете элементы и устанавливаете их высоту, равную их вычисляемому стилю высоты, вы можете использовать свой стиль collapse, чтобы переопределить высоту до 0 пикселей, вызывая переход между двумя явными числами.

var box = document.querySelector( ".box" );

// Set the box's initial height to its computed height
box.style.height = window.getComputedStyle( box ).height;

// Hide the box
box.classList.add( "collapsed" );

// Click will toggle a "collapsed" class on the box
document.addEventListener( "click", e => box.classList.toggle( "collapsed" ) )
.box {
  width: 100px;
  overflow: hidden;
  border: 1px solid #000;
  transition: all .2s ease;
}

.collapsed {
  height: 0!important;
}
<ul class="box">
  <li>Hello</li>
  <li>World</li>
</ul>

person Sampson    schedule 28.07.2016
comment
Да, я думал об этом. Высота известна при загрузке страницы и сохраняется в памяти. Затем они вводятся в атрибут стиля при нажатии var initialHeights = document.getElementsByClassName("level-1"); var values = []; for(var i = 0; initialHeights.length > i; i++){ values.push(initialHeights[i].offsetHeight); }. Мне также нужно, чтобы расширенный класс применялся и удалялся одновременно с удалением и добавлением свернутого класса. Я использовал toggle(), но выбрал более подробный и точный метод element.classList.add() и element.classList(remove). Я попробую ваш метод и вернусь. - person Stuart Harding; 29.07.2016
comment
Я попробовал это, и это вроде как работало, пока я не добавил суб-аккордеон в драку, и все это развалилось из-за того, что высоты не учитывались, поэтому я вернулся к исходной версии заполнения массива начальными высотами. Мои поиски продолжаются, и я обновлю планку, как только буду доволен тем, что у меня есть. - person Stuart Harding; 12.08.2016
comment
@StuartHarding Пожалуйста, поделитесь разметкой, которую вы хотели бы использовать, и я с удовольствием отредактирую свой ответ, чтобы приспособить его, насколько это возможно. - person Sampson; 12.08.2016
comment
Перейдите к этой ссылке. Там есть все, что нужно, с некоторыми дополнительными улучшениями, так как это привело к тому, что его уродливый CSS в IE не ведет себя как каша. - person Stuart Harding; 15.08.2016
comment
Я должен просто сказать, что это может быть только на моей машине, на которой она работает неправильно. У меня есть один компьютер с Windows под управлением Win10 и четыре компьютера Mac с различными операционными системами, поэтому, если он работает где-то еще, я буду рад, если он выйдет из строя из-за отказа моего ноутбука с Windows. Причина, по которой я говорю это, заключается в том, что меню работают в Parallels вплоть до IE10 (очевидно, IE9 не сможет анимировать css), но это может быть случайностью. - person Stuart Harding; 15.08.2016
comment
@StuartHarding Этот последний планк работает в Edge без проблем. - person Sampson; 15.08.2016
comment
:-/ Так что скорее всего дело в погоне за собственным хвостом. Я собираюсь отметить это как правильный ответ, так как он заставил меня задуматься о том, как высоты использовались немного иначе, чем я, и также может быть полезен другим. Спасибо, @Sampson. - person Stuart Harding; 16.08.2016