Question

我有一个简单的html，我想要一个桌面样式显示的flex项目，在悬停时增长。我还希望它能够过渡到成长状态，以获得流畅的用户体验。

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

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

更新：新的小提琴显示转换在两个浏览器中完美运行，在flexbox之外：https://jsfiddle.net/3vrp7xyo/9/

注意渐变颜色过渡实际上适用于两种浏览器，但水平增长/缩小不会

这是我的代码：

.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，过渡和IE10协同工作？

1 个答案: