如何使flexbox，過渡和IE10協同工作？

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> 

更新：我發現這個頁面用於自動為我的CSS代碼添加前綴 ，但即使在生成所有可能缺少的前綴之后，它也沒有改變我的用戶界面。

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規則以獲得清晰的概述！