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

我正在尝试让IE10对元素宽度的变化进行动画处理，以便它将另一个面板推开。我有一个JSBin演示了基本思想。在Chrome上，当您单击打开和关闭链接时，它会很好地显示动画。但是，在IE10中，它只是跳转到打开和关闭。我想我有所有必要的前缀 - 有人知道为什么它没有动画吗？

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

更新 2：显然 % 到 % 有效，像素到 px 和 % 到

px 和 px 到 % 有效，但 % 到任何计算都失败了

更新 3：在 Connect 上发现了此错误，它似乎准确地描述了这个问题（除了使用关键帧动画而不是过渡）。状态："已解决为已推迟"。该死的，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问题的简单示例：

http://jsfiddle.net/p6f0d3wb/
http://jsfiddle.net/v7wdaoq1/

在

创建此示例时没有损害任何计算

在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，这确保了它可以被隐藏（flex 项目默认min-width在最近的 Firefox 版本中处理方式不同）

完整示例

这个例子是用香草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>

以下是最大宽度的解决方法：

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

斯菲德尔

创建此示例时没有损害任何计算

完整示例

相关内容

最新更新

热门标签：