8

我试图让 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>

少：

@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 用户提供的显示问题的更简单示例：

4

2 回答 2

0

在创建此示例时没有损坏 calc

在 IE11、Chrome 和 Firefox 中测试和工作。

  • 导航被带到#left容器之外。现在我们有#nav,#left和#right

  • 导航是给定的flex: 0 0 54px。它不会从其默认值 54px 增长或缩小。

  • #right给出width: 66%

  • 在选择时，#right会width: 100%占用 flex 容器内的全部空间。#left被挤出并被隐藏并且导航保持不变，因为它已被告知不要缩小。

  • overflow: hiddenon防止其#left内容在 IE11 中溢出

  • #leftmin-width: 0与它一起给出flex: 1，这确保它可以被隐藏（min-width在最近的 Firefox 版本中，弹性项目的默认处理方式不同）

完整示例

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

于 2015-01-08T08:23:04.640 回答
0

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

.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

于 2016-12-15T21:16:16.210 回答