css - grow - ¿Cómo hacer que Flexbox, transiciones e IE10 trabajen juntos?
flex-wrap (1)
Tengo un html simple, donde quiero un elemento flexible en una pantalla de estilo de tabla, para crecer en vuelo estacionario. También quiero que pase al estado adulto para una experiencia de usuario fluida.
Lo he hecho funcionar en Chrome. El flex grow también funciona en IE, pero la transición no funciona. He comprobado tres veces, y las transiciones son compatibles con IE10, por lo que obviamente estoy haciendo algo diferente. Intenté investigar los cuatro atributos posibles para la transición, pero todo parece ser como debería. No puedo encontrar nada en la documentación que contradiga mi propia configuración.
Aquí está mi propio violín: https://jsfiddle.net/3vrp7xyo/3/ Aquí está el violín de otra respuesta a una pregunta aquí, que muestra exactamente el mismo problema: http://codepen.io/DrYSG/pen/ovctn ( simplemente elimine la barra en la pestaña js, para que funcione)
ACTUALIZACIÓN: El nuevo violín muestra las transiciones funcionando perfectamente en ambos buscadores, fuera de flexbox: https://jsfiddle.net/3vrp7xyo/9/
Tenga en cuenta que la transición de gradiente de color realmente funciona en ambos navegadores, pero el crecimiento / contracción horizontal no
Aquí está mi código:
.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>
ACTUALIZACIÓN: Encontré esta página para prefijar automáticamente mi código CSS , pero incluso después de generar todos los prefijos posiblemente faltantes, no hizo nada para cambiar mi interfaz de usuario.
La propiedad de transition-property propiedad CSS no puede usar las propiedades de flexbox para animar. Puede ver una lista completa de todas las propiedades compatibles aquí:
https://msdn.microsoft.com/en-us/library/dn254934(v=vs.85).aspx
Una posible solución ( 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>
Sugerencia: eliminé algunas reglas de CSS innecesarias / innecesarias para obtener una descripción clara