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

Question

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

Tur*_*yes 8 internet-explorer css3 css-transitions internet-explorer-10 internet-explorer-11

我试图让IE10动画一个元素宽度的变化,以便它推动另一个面板.我有一个JSBin演示了基本的想法.在Chrome上,当您点击打开和关闭链接时,它会动画很好.然而,在IE10中,它只是跳转到打开和关闭.我想我有所有必要的前缀 - 任何人都知道为什么它不是动画？

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

更新2:显然%-to-%,px-to-px,%-to-px和px-to-%,但%-to-whatever-calc-失败

更新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>

Run Code Online (Sandbox Code Playgroud)

减:

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

mis*_*Sam 0

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

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

导航被带出容器#left。现在我们有#nav,#left和#right
导航已给出flex: 0 0 54px。它不会比默认值 54px 增大或缩小。
#right给出width: 66%
选择后，#right将width: 100%占据弹性容器内的全部空间。#left被挤出并隐藏，导航保持不变，因为它被告知不要收缩。
on可防止其内容在 IE11overflow: hidden中#left溢出
#leftmin-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%;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，2 月前
查看次数：	1761 次
最近记录：	9 年，1 月前