使用 calc 时，IE9-11 中的过渡没有动画效果答案

【问题标题】：Transition not animating in IE9-11 when using calc使用 calc 时，IE9-11 中的过渡没有动画效果
【发布时间】：2013-11-15 14:48:19
【问题描述】：

我试图让 IE10 为元素宽度的变化设置动画，以便将另一个面板推开。我有一个JSBin 来演示基本思想。在 Chrome 上，当您单击打开和关闭链接时，它的动画效果很好。然而，在 IE10 中，它只是跳开和关闭。我想我有所有必要的前缀——有人知道为什么它没有动画吗？

更新：尝试为打开和关闭状态提供右侧显式像素值。动画就好了。握拳百分比....

更新 2：显然 %-to-% 有效，px-to-px、%-to-px 和 px-to-% 但 %-to-whatever-calc-失败

更新 3：在 Connect 中找到 this bug，这似乎准确地描述了这个问题（除了使用关键帧动画而不是过渡）。状态：“已解决为推迟”。该死的，IE。

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}');
    }
  }
}

其他 Stack Overflow 用户提供的显示 calc 问题的更简单示例：

【问题讨论】：

为什么要将规则嵌套在其他规则中？
为什么不呢？这不是生产代码，我知道嵌套#id 规则是多余的，我只是在演示问题。
我刚刚注意到您正在使用 LESS。你能添加正确的标签吗？
LESS 并不是真正的问题，我只是在使用它，因为我发现它比直接的 CSS 更方便。我在这里使用 LESS 是偶然的。
你已经看过这个了吗？ stackoverflow.com/questions/21142923/…

标签： css internet-explorer css-transitions internet-explorer-10 internet-explorer-11

【解决方案1】：

这是使用最大宽度的解决方法：

.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

【讨论】：

【解决方案2】：

在这个例子的创建过程中没有任何计算受到损害

在 IE11、Chrome 和 Firefox 中测试并运行。

导航被带到#left 容器之外。现在我们有#nav、#left 和#right
导航是flex: 0 0 54px。它不会从其默认值 54px 增长或缩小。
#right 被赋予width: 66%
在选择时，#right 被赋予 width: 100% 以占用弹性容器内的全部空间。 #left 被挤出并隐藏，导航保持不变，因为它被告知不要缩小。
#left 上的 overflow: hidden 可防止其内容在 IE11 中溢出
#left 与flex: 1 一起被赋予min-width: 0，这确保它可以被隐藏（弹性项目默认min-width 在最近的Firefox 版本中处理方式不同）

完整示例

这个例子是用 vanilla CSS 制作的。

在这个例子中，flex 容器的高度是用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>

【讨论】：

我在IE11中试过这个，没有看到过渡效果。它对你有用吗？
@Anonymous - 你是对的！我没有机会在 IE11 中进行测试。它似乎不想转换 flex 属性。我做了一些更改，现在宽度已转换（需要 no 计算）； 现在可以在 IE11 中使用 :)
是的，这似乎有效。烦人的 IE 这么久都没有解决这个问题。