如何使Flexbox，轉換和IE10一起工作？

Question

我有一個簡單的html，我希望在表格樣式顯示中使用flex項目，以便在懸停時增長。我也希望它轉變爲成長狀態，以獲得流暢的用戶體驗。

我使它在Chrome中工作。 Flex的增長也適用於IE，但過渡不會。我有三重檢查，並在IE10支持過渡，所以我顯然做了其他錯誤。我試圖研究過渡的四種可能的屬性，但一切似乎都應該如此。我無法在與我自己的設置相矛盾的文檔中找到任何內容。

這是我自己搗鼓：https://jsfiddle.net/3vrp7xyo/3/ 這裏是另一個問題的答案小提琴這裏，表現出完全一樣的問題：http://codepen.io/DrYSG/pen/ovctn（只是刪除斜線在JS標籤，使其工作）

UPDATE：新小提琴顯示過渡完美的工作在這兩個瀏覽器，那麼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>

UPDATE： 我發現this page for auto-prefixing my CSS-code，但即使生成所有可能缺乏前綴之後，它沒有做任何改變我的用戶界面。

Answer 1

CSS屬性transition-property無法使用柔性框屬性進行動畫處理。所有受支持的屬性的完整列表，你可以在這裏看到：
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規則，以獲得一個清晰的奧雅納rview！