Переход не анимируется в IE9-11 при использовании calc

Я пытаюсь заставить IE10 анимировать изменение ширины элемента, чтобы он отталкивал другую панель. У меня есть JSBin, демонстрирующий основную идею. В Chrome он отлично анимируется, когда вы нажимаете на ссылки открытия и закрытия. Однако в IE10 он просто открывается и закрывается. Я думаю, что у меня есть все необходимые префиксы - кто-нибудь знает, почему это не анимируется?

ОБНОВЛЕНИЕ: Попытался указать явные значения пикселей правой стороны для открытых и закрытых состояний. Анимировано просто отлично. трясет кулаком Проценты....

ОБНОВЛЕНИЕ 2: по-видимому, %-to-% работает, как и px-to-px, и %-to-px, и px-to-%, но %-to-whatever-calc-не удалось

ОБНОВЛЕНИЕ 3: обнаружена эта ошибка в Connect, который, кажется, описывает именно эту проблему (за исключением использования анимации ключевых кадров вместо переходов). Статус: «Решено как отложено». Черт возьми, ИИ.

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <section id="body-container">
      <div id="left">
        <div id="nav">
          <h1>Nav</h1>

          <a href="#right">
            Close
          </a>
          <a href="#">
            Open
          </a>
        </div>
        <div id="left-content">
          LEFT
        </div>
      </div>
      <div id="right">
        RIGHT
      </div>
    </section>
</body>
</html>

Меньше:

@nav-width: 54px;

html, body {
  width: 100%;
  height: 100%;
}

#body-container {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;

  #left,
  #right {
    height: 100%;
  }

  #left {
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: flex;
    background-color: red;

    #nav {
      width: @nav-width;
      height: 100%;
      background-color: yellow;
    }

    #left-content {
      -ms-flex: 1;
      flex: 1;
      background-color: orange;
    }
  }

  #right {
    width: 66%;
    background-color: blue;
    position: relative;
    -ms-transition: width 0.5s linear;
    transition: width 0.5s linear;

    &:target {
      width: calc(~'100% - @{nav-width}');
    }
  }
}

Более простые примеры, показывающие проблему с calc, предоставленные другими пользователями Stack Overflow:


css css-transitions internet-explorer internet-explorer-11 internet-explorer-10
person Turner Hayes    schedule 04.11.2013    source источник
comment
Почему вы вкладываете правила в другие правила?   -  person matewka    schedule 05.11.2013
comment
Почему бы нет? Это не предназначено для производственного кода, я знаю, что правила вложения #id избыточны, я просто демонстрирую проблему.   -  person Turner Hayes    schedule 05.11.2013
comment
Я только что заметил, что вы используете LESS. Можете ли вы добавить правильный тег?   -  person matewka    schedule 05.11.2013
comment
LESS на самом деле не проблема, я просто использовал его, потому что считаю его более удобным, чем простой CSS. Мое использование LESS здесь случайно.   -  person Turner Hayes    schedule 05.11.2013
comment
Ну, LESS может быть проблемой здесь. Может быть, это вызывает проблему с IE?   -  person matewka    schedule 05.11.2013
comment
Я почти уверен, что JSBin компилирует LESS перед его рендерингом, поэтому IE не должен заботиться/знать.   -  person Turner Hayes    schedule 05.11.2013
comment
Но, может быть, в вашем коде LESS есть ошибка? Может быть, это каким-то образом отображается, что оно не поддерживается IE. В любом случае, вы пытались сделать это на чистом CSS?   -  person matewka    schedule 05.11.2013
comment
Вы уже взглянули на это? stackoverflow.com/questions/21142923/   -  person sodawillow    schedule 02.01.2015
comment
@sodawillow Да, translateX не будет работать для размера элемента.   -  person Anonymous    schedule 02.01.2015
comment
Может тогда с transform: scaleX(n) ?   -  person sodawillow    schedule 02.01.2015
comment
@sodawillow Казалось бы, это работает, но элемент сжимается в центре, сохраняя исходную ширину. jsfiddle.net/p6f0d3wb/1 Кроме того, я не могу заставить его хорошо работать с все равно вычислить. Может я что-то упускаю?   -  person Anonymous    schedule 02.01.2015
comment
Теперь я понимаю лучше. Вы не ошиблись, элемент будет продолжать занимать исходное пространство. Может быть, вы могли бы вместо этого выполнить расчет с помощью LESS?   -  person sodawillow    schedule 02.01.2015
comment
Я никогда не работал с Less, но могу предположить, что он не может рассчитать 100% - 100px (или что-то подобное) без JavaScript или calc.   -  person Anonymous    schedule 02.01.2015
comment
Вы правы, я пока не нашел подвоха, даже со 100vw :)   -  person sodawillow    schedule 02.01.2015
comment
похоже, вы пытаетесь создать что-то подобное?< /а>. Но, как сейчас написано, это похоже на проблему XY.   -  person jbutler483    schedule 02.01.2015
comment
@ jbutler483 Это отчасти правильно, но содержимое смещается вправо, а не сжимается справа.   -  person Anonymous    schedule 02.01.2015
comment
см. здесь — это «сжимает» содержимое с правой стороны   -  person jbutler483    schedule 05.01.2015
comment
@ jbutler483 Это может быть альтернативой, но в идеале навигация имеет одинаковую ширину, не зависящую от размера экрана.   -  person Anonymous    schedule 05.01.2015
comment
Между прочим, такой вещи, как -ms-transition, не существует. Никогда не было версии с префиксом поставщика. Эта проблема также присутствует в IE11.   -  person Alexander O'Mara    schedule 08.01.2015
comment
Вот активный отчет об ошибке.   -  person Alexander O'Mara    schedule 08.01.2015

Ответы (2)


arrow_upward
0
arrow_downward

При создании этого примера ни один из расчетов не пострадал.

Протестировано и работает в IE11, Chrome и Firefox.

  • Навигация вынесена за пределы контейнера #left. Теперь у нас есть #nav, #left и #right

  • Навигация дается flex: 0 0 54px. Он не будет увеличиваться или уменьшаться по сравнению со значением по умолчанию, равным 54 пикселям.

  • #right дается width: 66%

  • При выборе #right дается width: 100%, чтобы занять все пространство внутри гибкого контейнера. #left выдавливается и скрывается, а навигация остается на месте, потому что было сказано не сжиматься.

  • overflow: hidden на #left предотвращает выплескивание его содержимого в IE11.

  • #left получает min-width: 0 вместе с flex: 1, это гарантирует, что его можно скрыть (флекс-элементы по умолчанию min-width обрабатываются по-разному в последних версиях Firefox)

Полный пример

Этот пример сделан с помощью ванильного CSS.

Для этого примера высота гибкого контейнера указана как height: 100vh. При необходимости его можно изменить на height: 100%.

body {
  margin: 0;
}
#body-container {
  display: flex;
  height: 100vh;
}
#nav {
  flex: 0 0 54px;
  background-color: yellow;
}
#left {
  flex: 1;
  background-color: orange;
  min-width: 0;
  overflow: hidden;
}
#right {
  background-color: blue;
  transition: width 0.5s linear;
  width: 66%;
}
#right:target {
  width: 100%;
}
<section id="body-container">
  <div id="nav">
    <h1>Nav</h1>
    <a href="#right">Close</a>
    <a href="#">Open</a>
  </div>
  
  <div id="left">
    LEFT
  </div>
  
  <div id="right">
    RIGHT
  </div>
</section>

person misterManSam    schedule 08.01.2015
comment
Я попробовал это в IE11 и не увидел эффекта перехода. Это работает для вас? - person Anonymous; 09.01.2015
comment
@Анонимус - Ты прав! У меня не было возможности протестировать в IE11. Похоже, он не хочет переходить к свойству flex. Я внес некоторые изменения, и теперь ширина изменена (без необходимости расчета); он теперь работает в IE11 :) - person misterManSam; 09.01.2015
comment
Да, кажется, это работает. Раздражает то, что IE так долго не исправлял эту проблему. - person Anonymous; 09.01.2015

arrow_upward
0
arrow_downward

Вот обходной путь с максимальной шириной:

.test {
    background: #990000;
    width: 200px;
    height: 200px;
    transition: width 0.5s linear;
    max-width: calc(100% - 54px);
}
.test.alt {
    width:100%;
    max-width: calc(100% - 54px);
}

jsfiddle

person Alexandr    schedule 15.12.2016