如何让 flexbox、transitions 和 IE10 协同工作？

Question

我有一个简单的 html，我希望 table 样式显示中的弹性项目在悬停时增长。我也希望它过渡到成长状态，以获得流畅的用户体验。

我已经在 Chrome 中实现了。 flex grow 也适用于 IE，但 transition 不行。我已经三重检查，IE10 支持转换，所以我显然做错了其他事情。我已经尝试研究所有四种可能的过渡属性，但一切似乎都应该如此。我在文档中找不到任何与我自己的设置相矛盾的内容。

这是我自己的fiddle：https://jsfiddle.net/3vrp7xyo/3/ 这是此处问题的另一个答案的 fiddle，显示了完全相同的问题：http://codepen.io/DrYSG/pen/ovctn（只需删除 js-tab 中的斜线，使其工作）

更新： 新 fiddle 显示过渡在 flexbox 之外的两种浏览器中都能完美运行：https://jsfiddle.net/3vrp7xyo/9/

注意渐变颜色过渡在两种浏览器中都有效，但水平grow/shrink不

这是我的代码：

.day-row>div {
  line-height: 18px;
  text-align: center;
  margin: -2px -1px;
  border: 2px solid black;
  font-size: 11px;
  color: black;
}

.day-row>div:first-child {
  margin-left: -2px;
}

.day-row>div:last-child {
  margin-right: -2px;
}

.day-row {
  background-color: #CCDFE0;
  margin: -2px;
  border: 2px solid black;
  background-color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.releasecalendar-container {
  margin: 0 auto;
  padding: 25px;
  max-width: 1500px;
}

.month-column {
  padding: 0;
  margin: -2px -1px;
  border: 2px solid black;
}

.day-sunday>.weekday-name-column,
.day-sunday>.date-column {
  background-color: #F44336;
  color: white;
}

.event {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  color: white;
  font-weight: bold;
}

.event:hover {
  flex: 10;
}

.weekday-name-column,
.date-column {
  width: 22px;
}

.FZ {
  background-color: #0098c3;
}

.FZ:hover {
  color: #0098c3;
  background-color: #11caff;
}

.H {
  color: black;
  background-color: #FFF;
}

.H:hover {
  background-color: #BBB;
}

<div class="month-column">
  <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
    <div class="weekday-name-column">Fr</div>
    <div class="date-column">01</div>
    <div class="event FZ  1 2 3 4"><span>Event 1</span></div>
    <div class="event H  1 2 3 4"><span>Event 2</span></div>
  </div>
  <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
    <div class="weekday-name-column">Sa</div>
    <div class="date-column">02</div>
    <div class="event FZ  1 2 3 4"><span>Event 1</span></div>
    <div class="event H  1 2 3 4"><span>Event 2</span></div>
    <div class="event H  1 2 3 4"><span>Event 3</span></div>
  </div>
</div>

更新： 我找到了 this page for auto-prefixing my CSS-code，但即使生成了所有可能缺少的前缀，它也没有改变我的用户界面。

Answer 1

CSS 属性 transition-property 无法使用 flexbox 属性来设置动画。您可以在此处查看所有受支持属性的完整列表：
https://msdn.microsoft.com/en-us/library/dn254934(v=vs.85).aspx

可能的解决方案 (https://jsfiddle.net/sebastianbrosch/hq0v7zzo/):

.month-column {
  border: 2px solid black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction:column;
  margin: -2px -1px;
  padding: 0;
}
.day-row {
  background-color: #fff;
  border: 2px solid black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  margin: -2px;
}
.day-row > div {
  border: 2px solid black;
  color: black;
  font-size: 11px;
  line-height: 18px;
  margin: -2px -1px;
  text-align: center;
}
.day-row > div:first-child {
  margin-left: -2px;
}
.day-row > div:last-child {
  margin-right: -2px;
}
.weekday-name-column,
.date-column {
  width: 22px;
}
.event {
  cursor: pointer;
  flex: 1;
  flex-basis:auto;
  font-weight: bold;
  overflow: hidden;
  text-align: center;
  transition:width 2s;
  white-space: nowrap;
  width:0%;
}
.event:hover {
  width:80%;
}
.event.FZ {
  background-color: #0098c3;
}
.event.FZ:hover {
  background-color: #11caff;
  color: #0098c3;
}

<div class="month-column">
  <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
    <div class="weekday-name-column">Fr</div>
    <div class="date-column">01</div>
    <div class="event FZ  1 2 3 4"><span>Event 1</span></div>
    <div class="event H  1 2 3 4"><span>Event 2</span></div>
  </div>
  <div class="day-row" id="day-1-2016" data-year="2016" data-month="0" data-day="1">
    <div class="weekday-name-column">Sa</div>
    <div class="date-column">02</div>
    <div class="event FZ  1 2 3 4"><span>Event 1</span></div>
    <div class="event H  1 2 3 4"><span>Event 2</span></div>
    <div class="event H  1 2 3 4"><span>Event 3</span></div>
  </div>
</div>

提示： 我删除了一些未使用/不必要的 CSS 规则以获得清晰的概览！

如何让 flexbox、transitions 和 IE10 协同工作？

How to make flexbox, transitions and IE10 work together?

css

css-transitions

flexbox

internet-explorer-10