Question

我正在尝试让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问题：

Answer 1

在创建此示例

时没有损坏任何计算结果

在IE11，Chrome和Firefox中测试并使用。

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

完整示例

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

此示例使用height: 100vh给出了flex容器的高度。如果需要，可以将其更改为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>

Answer 2

以下是max-width的解决方法：

.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

使用calc时，在IE9-11中过渡不动画

2 个答案:

在创建此示例

完整示例